Chapter 50: Canvas Transformations
1. What are “Canvas Transformations” actually?
Canvas Transformations are a set of methods that let you move, rotate, scale (resize), skew (slant), mirror, or stretch everything you draw on the canvas — without changing the original coordinates you used in your drawing code.
Think of it like this:
- You draw a circle at position (100, 100) with radius 50
- You want that circle to appear:
- 200 pixels to the right
- rotated 45 degrees
- twice as big
- slanted like italic text
Instead of rewriting all coordinates (which would be painful), you tell Canvas:
“From now on, change the coordinate system like this… then draw normally”
After you finish, you can reset the coordinate system so the next drawing is not affected.
This is extremely powerful because:
- Makes animation (rotation, bouncing, scaling) easy
- Lets you reuse the same drawing code in different positions/sizes/angles
- Creates fake 3D effects, spinning wheels, clocks, tilted text, zooming UI, etc.
- Used in almost every real canvas game, interactive chart, animated loader, or custom control
The main transformation methods are:
- translate(x, y) — move origin
- rotate(angle) — rotate around current origin
- scale(x, y) — resize (stretch/squash)
- transform(a, b, c, d, e, f) — full matrix (advanced)
- setTransform(a, b, c, d, e, f) — reset + set new matrix
- save() & restore() — save/undo transformations
2. The Most Important Rule (Never Forget This!)
Transformations are cumulative and affect everything drawn after them — until you reset.
Order matters a lot — transformations are applied in reverse order (last one first).
Always use save() before changing transformations and restore() after — or your next drawings will be messed up!
3. Your First Transformations Example – Move, Rotate, Scale (Copy-Paste & Run)
Create canvas-transformations-hello.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Transformations – Move, Rotate, Scale</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Transformations – Move, Rotate, Scale</h1> <canvas id="transformCanvas" width="800" height="500"></canvas> <script> const canvas = document.getElementById('transformCanvas'); const ctx = canvas.getContext('2d'); // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === Helper: draw a simple house shape at (0,0) with origin at bottom-center === function drawHouse() { ctx.fillStyle = '#e74c3c'; ctx.fillRect(-40, -80, 80, 80); // body ctx.beginPath(); ctx.moveTo(-50, -80); ctx.lineTo(0, -120); ctx.lineTo(50, -80); ctx.closePath(); ctx.fillStyle = '#c0392b'; ctx.fill(); // roof ctx.fillStyle = '#f1c40f'; ctx.fillRect(-15, -40, 30, 40); // door } // === 1. Original house – no transformation === ctx.save(); ctx.translate(150, 200); // move to position drawHouse(); ctx.restore(); ctx.font = '20px Arial'; ctx.fillStyle = '#2c3e50'; ctx.fillText('Original (no transform)', 150, 280); // === 2. Moved & scaled 1.5× === ctx.save(); ctx.translate(450, 200); // move to new position ctx.scale(1.5, 1.5); // make 1.5× bigger drawHouse(); ctx.restore(); ctx.fillText('Moved + Scaled 1.5×', 450, 280); // === 3. Rotated 30° around its center === ctx.save(); ctx.translate(350, 450); // move to new position ctx.rotate(30 * Math.PI / 180); // 30 degrees in radians drawHouse(); ctx.restore(); ctx.fillText('Rotated 30°', 350, 530); // === 4. Combined: translate → rotate → scale === ctx.save(); ctx.translate(650, 250); // move first ctx.rotate(45 * Math.PI / 180); // then rotate ctx.scale(1.2, 1.2); // then scale drawHouse(); ctx.restore(); ctx.fillText('Translate → Rotate → Scale', 650, 380); </script> </body> </html> |
What you see:
- Four houses drawn with the same drawHouse() function
- Each one transformed differently (moved, scaled, rotated, combined)
- Labels explaining what happened
4. All Important Transformation Methods (With Copy-Paste Snippets)
A. translate(x, y) – Move the origin
|
0 1 2 3 4 5 6 7 |
ctx.translate(200, 150); // now (0,0) is at previous (200,150) ctx.fillRect(0, 0, 100, 100); // appears at (200,150) on canvas |
B. rotate(angleInRadians) – Rotate around current origin
|
0 1 2 3 4 5 6 7 8 |
ctx.translate(300, 200); // move origin to center of rotation ctx.rotate(45 * Math.PI / 180); // 45 degrees ctx.fillRect(-50, -50, 100, 100); // drawn centered at new origin |
C. scale(x, y) – Resize / stretch
|
0 1 2 3 4 5 6 7 |
ctx.scale(2, 1.5); // twice as wide, 1.5× taller ctx.fillRect(100, 100, 100, 100); // becomes 200 wide, 150 tall |
D. Full matrix transform (advanced – rarely needed directly)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.transform(a, b, c, d, e, f); // a = horizontal scale // b = horizontal skew // c = vertical skew // d = vertical scale // e = horizontal translate // f = vertical translate |
E. save() & restore() – The lifesaver
|
0 1 2 3 4 5 6 7 8 9 10 11 |
ctx.save(); // remember current state ctx.translate(300, 200); ctx.rotate(Math.PI / 4); ctx.scale(1.5, 1.5); // draw something ctx.restore(); // back to previous state – very important! |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Order matters — transformations are applied right to left (last one first)
JavaScript012345678ctx.translate(100, 0); ctx.scale(2, 2); // first scale, then move (move distance ×2)// vsctx.scale(2, 2); ctx.translate(100, 0); // first move, then scale (move distance stays 100)
- Always translate to center before rotate/scale — otherwise rotates around (0,0) top-left
- Common mistake #1: Forget restore() → all later drawings are rotated/scaled wrongly
- Common mistake #2: Rotate without translate → object spins around top-left corner
- Pro tip: Use transform-origin in CSS if applying CSS transforms to canvas element itself (rare)
Understood Canvas Transformations fully now? This is one of the most powerful & most-used features in Canvas — almost every animation (spinning loaders, rotating wheels, bouncing icons, zooming UI, tilted text, game characters) uses transformations.
Tell me what you want next — we can build on this:
- Full animated rotating wheel / clock hands?
- Hover scale + rotate button effect?
- Fake 3D card tilt with skew + rotate?
- Draggable/resizable shape with transformations?
- Or 15-question Canvas transformations quiz?
Just say — we keep going step by step together! 🚀
