Chapter 35: Canvas Coordinates
Canvas Coordinates in the clearest, most patient way possible.
Imagine I’m sitting right next to you with my screen open, and we’re going to build understanding together step by step — no rushing, no skipping, lots of tiny visual examples, and repeated explanations until it feels natural.
1. The single most important sentence about Canvas coordinates
In HTML5 Canvas, the coordinate (0,0) is always at the top-left corner of the canvas element.
- x increases → to the right
- y increases → downward
This is the opposite of the math graphs you learned in school (where y usually goes up).
Quick mental picture (imagine this grid):
|
0 1 2 3 4 5 6 7 8 9 10 |
(0,0) ────► x increases (right) │ │ ▼ y increases (down) |
Every point on the canvas is described by a pair:
- (x, y) → x = horizontal distance from left edge → y = vertical distance from top edge
2. Visual proof – where do these four points go?
Copy-paste and run this tiny example — it will make everything click instantly.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Coordinates – Where is (0,0)?</title> <style> canvas { border: 2px solid #333; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Draw grid lines every 50 pixels (helps see coordinates) ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1; for (let i = 0; i <= canvas.width; i += 50) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); ctx.stroke(); } for (let i = 0; i <= canvas.height; i += 50) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); ctx.stroke(); } // Now draw four labeled points function drawPoint(x, y, label, color = '#F44336') { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000'; ctx.font = 'bold 18px Arial'; ctx.textAlign = 'center'; ctx.fillText(label, x, y - 20); } drawPoint(0, 0, '(0,0) – top-left', '#F44336'); drawPoint(600, 0, '(600,0) – top-right', '#2196F3'); drawPoint(0, 400, '(0,400) – bottom-left', '#4CAF50'); drawPoint(600, 400, '(600,400) – bottom-right', '#FF9800'); // Center cross ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(300, 0); ctx.lineTo(300, 400); ctx.moveTo(0, 200); ctx.lineTo(600, 200); ctx.stroke(); ctx.fillStyle = '#333'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.fillText('Center ≈ (300, 200)', 300, 180); </script> </body> </html> |
Run this code.
You will see:
- Red dot at top-left → (0,0)
- Blue dot at top-right → (600,0)
- Green dot at bottom-left → (0,400)
- Orange dot at bottom-right → (600,400)
This is the only coordinate system Canvas uses — always.
3. Common beginner confusion & how to fix it
Confusion 1 “I want the circle in the middle — why is it in the corner?”
|
0 1 2 3 4 5 6 |
ctx.arc(100, 100, 50, 0, Math.PI*2); // ← this is near top-left |
Fix Use half the canvas size for center:
|
0 1 2 3 4 5 6 7 8 9 |
const centerX = canvas.width / 2; // 300 const centerY = canvas.height / 2; // 180 ctx.arc(centerX, centerY, 80, 0, Math.PI*2); |
Confusion 2 “Why does y increase downward? I want it to go up like math class.”
Answer You cannot change it — that is how every screen coordinate system works (HTML, Canvas, most game engines, CSS, etc.). If you really want math-style y-up coordinates, you can flip the canvas once at the beginning:
|
0 1 2 3 4 5 6 7 |
ctx.translate(0, canvas.height); // move origin to bottom-left ctx.scale(1, -1); // flip y-axis upward |
Now (0,0) is bottom-left and y grows upward — but most people don’t do this because it flips text and images upside-down too.
Best advice: Just get used to y-down. After 2–3 days it feels completely normal.
4. Quick coordinate examples you should try
Example A – Four corners
|
0 1 2 3 4 5 6 7 8 9 |
ctx.fillStyle = '#F44336'; ctx.fillRect(0, 0, 80, 80); // top-left ctx.fillStyle = '#2196F3'; ctx.fillRect(canvas.width-80, 0, 80, 80); // top-right ctx.fillStyle = '#4CAF50'; ctx.fillRect(0, canvas.height-80, 80, 80); // bottom-left ctx.fillStyle = '#FF9800'; ctx.fillRect(canvas.width-80, canvas.height-80, 80, 80); // bottom-right |
Example B – Center circle
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
const cx = canvas.width / 2; const cy = canvas.height / 2; ctx.beginPath(); ctx.arc(cx, cy, 100, 0, Math.PI*2); ctx.fillStyle = '#673AB7'; ctx.fill(); |
Example C – Diagonal line from top-left to bottom-right
|
0 1 2 3 4 5 6 7 8 9 10 11 |
ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(canvas.width, canvas.height); ctx.strokeStyle = '#000'; ctx.lineWidth = 6; ctx.stroke(); |
5. Summary – One-page Canvas Coordinate Cheat Sheet
- (0,0) = top-left corner
- x → right
- y → down
- Center of canvas ≈ (canvas.width/2, canvas.height/2)
- Bottom-right corner = (canvas.width, canvas.height)
- All drawing commands (fillRect, arc, lineTo, fillText, etc.) use this system
- No way to change it globally — learn to love y-down
Your tiny homework (5–10 minutes)
- Draw four colored squares — one in each corner of the canvas
- Draw a thick purple diagonal line from top-left to bottom-right
- Draw a big circle exactly in the center (use canvas.width/2 and canvas.height/2)
Paste your code here when you’re done — I’ll look at it like we’re sitting together debugging.
Which sentence or concept still feels a bit slippery?
- The y-axis going down?
- How to find the center every time?
- Why coordinates are pixels and not percentages?
- Something else?
Tell me — we’ll stay on coordinates until it feels 100% comfortable. You’re doing really well — this is the foundation everything else sits on! 🚀
