Canvas gradients & patterns #171

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

Implement gradient and pattern fill/stroke styles for the canvas 2D context.

Dependencies#

• Canvas rectangle operations & color styles (issue 3)
• Canvas path API & rasterization (issue 4)

Requirements#

Linear gradients:

• createLinearGradient(x0, y0, x1, y1) → CanvasGradient object
• Gradient interpolation along the line from (x0,y0) to (x1,y1)
• Colors beyond the gradient endpoints use the nearest stop color

Radial gradients:

• createRadialGradient(x0, y0, r0, x1, y1, r1) → CanvasGradient
• Interpolation between two circles (center0, radius0) → (center1, radius1)

Conic gradients:

• createConicGradient(startAngle, cx, cy) → CanvasGradient
• Angular interpolation around the center point

Color stops:

• CanvasGradient.addColorStop(offset, color) — offset in [0.0, 1.0]
• Sort stops by offset, interpolate between adjacent stops in sRGB space
• Throw RangeError for offset outside [0, 1]

Patterns:

• createPattern(image, repetition) → CanvasPattern
• repetition: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
• Image source: HTMLImageElement, HTMLCanvasElement
• CanvasPattern.setTransform(matrix) — transform the pattern

Integration:

• Gradients and patterns can be assigned to fillStyle and strokeStyle
• Apply current CTM to gradient/pattern coordinates
• Gradient/pattern sampling during fill and stroke rasterization

Acceptance criteria#

• Linear gradient fills a rectangle with smooth color transitions
• Radial gradient produces circular color bands
• Conic gradient produces angular color sweep
• Multiple color stops interpolate correctly
• Patterns tile images with correct repetition modes
• Gradients/patterns work with both fillRect and path fill/stroke
• Unit tests for gradient interpolation and pattern tiling