Canvas image drawing #173

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

Implement the drawImage() method for drawing images onto the canvas.

Dependencies#

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

Requirements#

drawImage() overloads:

• drawImage(image, dx, dy) — draw image at destination position (1:1 scale)
• drawImage(image, dx, dy, dWidth, dHeight) — draw image scaled to destination rect
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) — draw sub-rectangle of source, scaled to destination rect

Image sources:

• HTMLImageElement — use decoded pixel data from image crate
• HTMLCanvasElement — read from another canvas's backing buffer
• Throw InvalidStateError if image is not fully decoded or has zero dimensions

Scaling & interpolation:

• imageSmoothingEnabled (default true) — enable/disable interpolation
• imageSmoothingQuality: 'low', 'medium', 'high' (hint for interpolation quality)
• Bilinear interpolation when smoothing enabled, nearest-neighbor when disabled

Transform integration:

• Apply current CTM to destination coordinates
• Source rectangle coordinates are in image space (not affected by CTM)

Edge cases:

• Negative source/dest width/height flips the image
• Source rect clipped to image bounds
• Zero-dimension source or dest is a no-op

Acceptance criteria#

• Draw an HTMLImageElement onto the canvas at a specific position
• Draw a scaled version of an image
• Draw a cropped sub-region of an image
• Copy pixels from one canvas to another via drawImage
• Bilinear interpolation produces smooth scaling
• Nearest-neighbor (smoothing disabled) produces crisp pixel scaling
• Unit tests for coordinate mapping and pixel sampling