Canvas rectangle operations & color fill/stroke styles #168

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

Implement rectangle drawing primitives and color-based fill/stroke styles.

Dependencies#

• Canvas element infrastructure (issue 1)
• Canvas state management & transformation matrix (issue 2)

Requirements#

Rectangle operations:

• fillRect(x, y, w, h) — fill a rectangle with the current fillStyle
• strokeRect(x, y, w, h) — stroke a rectangle outline with the current strokeStyle
• clearRect(x, y, w, h) — clear pixels in the rectangle to transparent black
• All operations apply the current transformation matrix
• Zero-width or zero-height rectangles are no-ops (per spec)

Fill and stroke styles (colors):

• fillStyle property — accepts CSS color strings, defaults to "#000000"
• strokeStyle property — accepts CSS color strings, defaults to "#000000"
• Parse CSS color values: hex (#rgb, #rrggbb, #rgba, #rrggbbaa), rgb(), rgba(), named colors, transparent
• Invalid color strings are silently ignored (keep previous value)
• lineWidth property (default 1.0) — affects strokeRect outline thickness

Pixel-level rendering:

• Rasterize filled rectangles directly into the backing RGBA8 buffer
• Apply alpha blending (source-over) when fillStyle has alpha < 1.0
• Stroke rectangles render as outlines with lineWidth thickness
• clearRect sets alpha to 0 in the target region

Acceptance criteria#

• ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 100, 50) draws a red rectangle
• ctx.strokeRect(10, 10, 100, 50) draws a black outline
• ctx.clearRect(20, 20, 30, 30) clears a region to transparent
• Color parsing handles hex, rgb(), rgba(), named colors
• Transformed rectangles render at correct positions
• Unit tests for color parsing, rectangle rasterization, alpha blending