Canvas element & 2D rendering context infrastructure #166

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

Implement the <canvas> HTML element and the foundational CanvasRenderingContext2D infrastructure.

Requirements#

HTMLCanvasElement DOM interface:

• width and height attributes (default 300×150), reflected as DOM properties
• getContext('2d') returning a CanvasRenderingContext2D object
• Return None/null for unsupported context types (e.g., 'webgl')

Backing pixel buffer:

• RGBA8 pixel buffer (Vec) sized to canvas width × height × 4
• Initialize to transparent black (all zeros)
• Resize buffer when width/height attributes change (clear contents on resize per spec)

Layout integration:

• Canvas is a replaced element with intrinsic size equal to its width/height attributes
• Participates in inline layout like <img>

Render integration:

• Paint the canvas backing buffer into the display list as a bitmap
• The canvas bitmap should composite into the page at the element's layout position

JS bindings:

• Expose HTMLCanvasElement on canvas element nodes in the JS DOM bridge
• canvas.getContext('2d') returns a JS object representing the 2D context
• The context object holds a reference back to the canvas's backing buffer
• canvas.width / canvas.height readable and writable from JS

Acceptance criteria#

• <canvas width="400" height="300"></canvas> creates a 400×300 transparent area in the page
• canvas.getContext('2d') returns a context object from JS
• Changing canvas.width or canvas.height from JS resizes and clears the buffer
• The canvas area is visible in the rendered page at the correct position