Order matters: translate and rotate
The same numbers, a different order, a different place. Three squares: teal after translate then rotate, orange after rotate then translate, yellow after scale then translate.
translate, rotate and scale move the canvas's grid instead of your shapes, and every one of them stays set until you undo it. save and restore are how you undo them, and forgetting that is the source of most canvas surprises.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw five 20 × 20 squares in a row, 30 pixels apart, using translate and save/restore so that no change leaks.
Draw a 40-pixel-long line that spins around its middle by 45 degrees, centred at (100, 50).
Explain it without notes
Why does drawing three markers with translate and no restore put marker 3 off the canvas?
What does save() save, and what does restore() not bring back?
How do translate then rotate differ from rotate then translate?
Preview
Console
Nothing logged yet.Expected console output
translate, then rotate: the square's corner (40, 0) lands at (234.6, 50)
rotate, then translate: the square's corner (40, 0) lands at (133.6, 88.7)
scale(2), then translate(30): the square's corner (40, 0) lands at (420, 20)
after restore, the matrix is the identity again: true