we (web engine): Experimental web browser project to understand the limits of Claude
Add Phase 18: Canvas 2D API to development plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+17
+17
PLAN.md
+17
PLAN.md
···
232
232
233
233
**Test milestone:** Click a link on a real web page and navigate to the destination. Use back button to return.
234
234
235
+
## Phase 18: Canvas 2D API
236
+
237
+
**Goal:** Implement the HTML Canvas 2D rendering API for dynamic, scriptable graphics.
238
+
239
+
- `<canvas>` element: HTMLCanvasElement DOM interface (width, height, getContext), backing RGBA8 pixel buffer, layout as replaced element (default 300×150), render integration
240
+
- Canvas state management: save()/restore() state stack, current transformation matrix (CTM), translate(), rotate(), scale(), transform(), setTransform(), resetTransform(), getTransform()
241
+
- Rectangle operations & color styles: fillRect(), strokeRect(), clearRect(), fillStyle/strokeStyle with CSS color parsing, lineWidth, alpha blending
242
+
- Path API & rasterization: beginPath(), closePath(), moveTo(), lineTo(), rect(), arc(), arcTo(), bezierCurveTo(), quadraticCurveTo(), ellipse(), fill(fillRule), stroke(), Path2D, isPointInPath(), isPointInStroke()
243
+
- Line styles: lineCap (butt/round/square), lineJoin (miter/round/bevel), miterLimit, setLineDash(), getLineDash(), lineDashOffset, stroke geometry generation
244
+
- Gradients & patterns: createLinearGradient(), createRadialGradient(), createConicGradient(), CanvasGradient.addColorStop(), createPattern(), CanvasPattern
245
+
- Text rendering: font property (CSS font shorthand parsing), textAlign, textBaseline, direction, fillText(), strokeText(), measureText() → TextMetrics, integration with `text` crate
246
+
- Image drawing: drawImage() (3 overloads), source from HTMLImageElement/HTMLCanvasElement, bilinear interpolation, imageSmoothingEnabled/imageSmoothingQuality
247
+
- Pixel manipulation: ImageData interface, createImageData(), getImageData(), putImageData(), Uint8ClampedArray in JS engine
248
+
- Compositing, clipping & output: globalAlpha, globalCompositeOperation, clip(), shadowColor/shadowBlur/shadowOffsetX/shadowOffsetY, toDataURL(), toBlob()
249
+
250
+
**Test milestone:** Render animated graphics via `<canvas>` using requestAnimationFrame. Draw charts, shapes, and text programmatically.
251
+
235
252
---
236
253
237
254
## Test Suites