Input HarborISSUE #17 of 46

canvas · pixel-by-pixel drawing

FormaVSCaptain Invalid Input

Forma saysThe <canvas> element is a blank bitmap you draw on with JavaScript — pixels, not elements.

<canvas> gives you a rectangle and a drawing context. You get the context with canvas.getContext('2d'), then issue commands: fillRect, fillStyle, and so on. Everything you draw becomes flat pixels — there are no DOM nodes inside a canvas.

That makes canvas fast for games, charts, and effects, but it also means it's invisible to screen readers and you can't click "shapes" — you track positions yourself. Always set width/height as attributes (not just CSS) or the drawing surface stretches.

Power-ups you unlock

getContext("2d") returns the drawing API
You draw pixels — no elements, no DOM inside
Fast for games/charts; not accessible by default
Set width/height attributes, not just CSS, to avoid stretching

Captain Invalid Input attacks — common mistakes

Sizing the canvas with CSS only → blurry, stretched drawing
Expecting to click or style individual shapes (they are pixels)
Forgetting to re-draw after clearing each animation frame

Boss battleDraw two filled rectangles in different colors, then add a third using a color from the 7slf palette (#b388ff).

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;display:grid;place-items:center;height:100vh;margin:0">
  <canvas id="c" width="300" height="200" style="border:1px solid #2a1d4a"></canvas>
  <script>
    const x = document.getElementById('c').getContext('2d');
    x.fillStyle = '#b388ff'; x.fillRect(20, 20, 100, 80);
    x.fillStyle = '#8aff9d'; x.fillRect(80, 70, 100, 80);
    x.fillStyle = '#ffcf6b'; x.fillRect(140, 40, 100, 80);
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Validation · Client-Side Vs Server-Side Canvas · Paths · Arcs · Curves ›