Input HarborISSUE #19 of 46

canvas · text · images · transforms

FormaVSCaptain Invalid Input

Forma saysCanvas can also draw text, images, and apply transforms — translate, rotate, scale — to everything you draw after.

fillText(str,x,y) draws text (set font first); drawImage(img,x,y) paints a loaded image. Transforms reshape the coordinate system: translate moves the origin, rotate spins it, scale zooms.

Transforms accumulate, so wrap changes in save()/restore() to snapshot and roll back the state. Rotating text or stamping an image at an angle is just translate-to-point, rotate, then draw at the origin.

Power-ups you unlock

fillText after setting ctx.font · drawImage for bitmaps
translate/rotate/scale transform the coordinate system
save()/restore() snapshot and roll back state
Transforms accumulate — restore to avoid drift

Captain Invalid Input attacks — common mistakes

Drawing an image before it finishes loading (use img.onload)
Forgetting save/restore so rotations stack forever
Setting font after fillText instead of before

Boss battleDraw a line of text, then save(), rotate 0.2 radians, draw the text again, and restore() so the next draw is upright.

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.font = '20px monospace';
    x.fillText('upright', 20, 40);
    x.save();
    x.translate(150, 120); x.rotate(0.25);
    x.fillStyle = '#8aff9d'; x.fillText('rotated', 0, 0);
    x.restore();
    x.fillText('upright again', 20, 180);
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Canvas · Paths · Arcs · Curves Svg · Vector Graphics In Markup ›