Canvas compositing, clipping & output #175

Phase 18: Canvas 2D API — Issue 10/10#

Implement compositing modes, clipping regions, shadow effects, and canvas output methods.

Dependencies#

• Canvas path API & rasterization (issue 4)
• Canvas pixel manipulation (issue 9)

Requirements#

Compositing:

• globalAlpha (default 1.0) — applied to all drawing operations, range [0.0, 1.0]
• globalCompositeOperation (default 'source-over') — Porter-Duff compositing modes:
  • source-over, source-in, source-out, source-atop
  • destination-over, destination-in, destination-out, destination-atop
  • lighter, copy, xor
• Each drawing operation composites the source onto the destination using the selected mode

Clipping:

• clip() — intersect the current clipping region with the current path (nonzero winding)
• clip('evenodd') — intersect using even-odd rule
• clip(path2d) / clip(path2d, fillRule)
• Clipping region is part of the drawing state (saved/restored)
• All subsequent drawing is masked to the clipping region
• Default clipping region is the entire canvas

Shadows:

• shadowColor (default 'rgba(0,0,0,0)' — transparent, effectively off)
• shadowBlur (default 0) — Gaussian blur radius
• shadowOffsetX, shadowOffsetY (default 0) — shadow displacement
• Shadows are drawn before the shape itself, using the shadow color
• Apply Gaussian blur to the shadow shape (approximation acceptable)

Canvas output:

• canvas.toDataURL(type?, quality?) — serialize canvas to base64 data URL
  • Default type: 'image/png'
  • 'image/jpeg' with quality parameter (0.0–1.0)
• canvas.toBlob(callback, type?, quality?) — async version returning a Blob

Acceptance criteria#

• globalAlpha makes drawing semi-transparent
• source-over (default) blends correctly; 'copy' replaces destination
• Clipping with a circular path restricts all subsequent drawing to the circle
• Shadows appear offset and blurred behind drawn shapes
• toDataURL returns a valid base64-encoded PNG data URL
• Composite operations produce correct pixel results for overlapping shapes
• save/restore preserves clipping region and compositing state
• Unit tests for Porter-Duff compositing math and clipping mask application