API ArcadeISSUE #1 of 23

canvas api · 2d drawing

ApiaVSLegacy Larry

Apia saysThe Canvas 2D API draws shapes, text, and images pixel-by-pixel via a context.

Get a context with canvas.getContext("2d"), then issue drawing commands: fillRect, beginPath+arc+fill, fillText, drawImage. Everything becomes flat pixels (no DOM nodes), so canvas is fast for games, charts, and effects. Combine with requestAnimationFrame for animation.

Power-ups you unlock

getContext("2d") returns the drawing API
fillRect, arc, fillText, drawImage
Pixels, not elements — fast for games/charts
Pair with requestAnimationFrame to animate

Legacy Larry attacks — common mistakes

Sizing the canvas with CSS only (blurry)
Expecting to click individual shapes
Forgetting to clear before each animation frame

Boss battleDraw a filled circle and a rectangle on a canvas.

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="240" height="160" style="border:1px solid #2a1d4a"></canvas>
<script>const x=document.getElementById('c').getContext('2d');x.fillStyle='#b388ff';x.fillRect(20,20,80,80);x.fillStyle='#8aff9d';x.beginPath();x.arc(170,80,40,0,Math.PI*2);x.fill();</script></body></html>

▶ Open the interactive comic issue

Webgl · The 3d Gpu Interface ›