Chapter 35: Canvas Coordinates
1. What are “Canvas Coordinates” actually?
Canvas coordinates are the address system (like a map grid) that tells JavaScript exactly where to draw something on the <canvas> element.
Think of the canvas like a big piece of graph paper:
- Top-left corner = (0, 0)
- X increases to the right
- Y increases downwards (not upwards like school math graph paper)
This is very different from normal math coordinates (where Y goes up) — it’s the same as how computer screens, photos, and almost all web graphics work.
So remember forever:
- (0, 0) = top-left corner of the canvas
- Positive X = right
- Positive Y = down
- Canvas.width = rightmost X
- Canvas.height = bottommost Y
2. Visual Map of Canvas Coordinates (Text Diagram)
Imagine a 400 × 300 canvas:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(0,0) (400,0) ┌──────────────────────────────────────┐ │ │ │ │ │ (200,150) ← center │ │ │ │ │ └──────────────────────────────────────┘ (0,300) (400,300) |
- Top-left pixel = (0, 0)
- Top-right pixel = (399, 0) ← width-1
- Bottom-left pixel = (0, 299) ← height-1
- Bottom-right pixel = (399, 299)
- Exact center = (200, 150)
3. Your First Coordinate Example – Draw Points Everywhere (Copy-Paste & Run)
Create canvas-coordinates.html and paste this:
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Coordinates – Visual Map</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Understanding Canvas Coordinates</h1> <canvas id="coordCanvas" width="600" height="400"></canvas> <script> const canvas = document.getElementById('coordCanvas'); const ctx = canvas.getContext('2d'); // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Grid lines (every 50 pixels) – helps see coordinates ctx.strokeStyle = '#bdc3c7'; ctx.lineWidth = 1; for (let x = 0; x <= canvas.width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for (let y = 0; y <= canvas.height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } // Mark important points with red dots + labels function drawPoint(x, y, label) { ctx.beginPath(); ctx.arc(x, y, 6, 0, Math.PI * 2); ctx.fillStyle = '#e74c3c'; ctx.fill(); ctx.font = '14px Arial'; ctx.fillStyle = '#2c3e50'; ctx.textAlign = 'left'; ctx.fillText(label, x + 10, y - 5); } drawPoint(0, 0, '(0, 0) – Top-Left'); drawPoint(canvas.width, 0, `({canvas.width}, 0) – Top-Right`); drawPoint(0, canvas.height, `(0, ${canvas.height}) – Bottom-Left`); drawPoint(canvas.width, canvas.height, `(${canvas.width}, ${canvas.height}) – Bottom-Right`); drawPoint(canvas.width/2, canvas.height/2, `Center (${canvas.width/2}, ${canvas.height/2})`); // Draw arrow from top-left to center ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(canvas.width/2 - 20, canvas.height/2 - 20); ctx.strokeStyle = '#3498db'; ctx.lineWidth = 4; ctx.stroke(); ctx.font = 'bold 28px Arial'; ctx.fillStyle = '#34495e'; ctx.textAlign = 'center'; ctx.fillText('Y increases ↓ DOWN', canvas.width/2, 80); ctx.fillText('X increases → RIGHT', canvas.width/2, canvas.height - 40); </script> </body> </html> |
What you see:
- Light grid showing coordinates every 50 pixels
- Red dots + labels at corners and center
- Arrow from top-left to center
- Text explaining “Y increases DOWN” and “X increases RIGHT”
This is the most important visual every student should see once — it fixes the #1 confusion forever.
4. How Coordinates Work in Different Commands
A. fillRect(x, y, width, height)
|
0 1 2 3 4 5 6 7 8 9 |
ctx.fillStyle = 'orange'; ctx.fillRect(100, 50, 200, 120); // Starts at (100, 50) top-left of rectangle // Goes 200 right, 120 down |
B. arc(cx, cy, radius, startAngle, endAngle)
|
0 1 2 3 4 5 6 7 8 9 |
ctx.beginPath(); ctx.arc(300, 200, 80, 0, Math.PI * 2); // Center of circle = (300, 200) // Radius 80 pixels in all directions |
C. lineTo(x, y) & moveTo(x, y)
|
0 1 2 3 4 5 6 7 8 9 |
ctx.beginPath(); ctx.moveTo(50, 100); // start here ctx.lineTo(250, 300); // draw to here (x=250, y=300) ctx.stroke(); |
D. Text position
|
0 1 2 3 4 5 6 7 |
ctx.fillText('Test', 200, 150); // (200, 150) is the **anchor point** (depends on textAlign & textBaseline) |
5. Very Important Coordinate Concepts (Exam & Project Favorites)
A. Canvas (0,0) is always top-left — never changes
No matter how big/small the canvas, (0,0) = top-left pixel.
B. Canvas size = pixel size
If you set <canvas width=”600″ height=”400″>, the drawing surface has exactly 600×400 pixels. CSS width/height only changes display size — drawing still happens in 600×400 pixels → can look blurry if CSS size ≠ attribute size.
Wrong way (blurry):
|
0 1 2 3 4 5 6 |
<canvas id="c" style="width:600px; height:400px;"></canvas> |
Right way (sharp):
|
0 1 2 3 4 5 6 |
<canvas id="c" width="600" height="400"></canvas> |
C. Responsive canvas (very common question)
To make canvas responsive:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
function resizeCanvas() { canvas.width = window.innerWidth * 0.8; canvas.height = window.innerHeight * 0.6; // redraw everything here } window.addEventListener('resize', resizeCanvas); resizeCanvas(); |
6. Teacher’s Quick Tips (Hyderabad Student Style)
- Always remember: Y goes down — opposite of school graphs
- Center of canvas = canvas.width / 2, canvas.height / 2
- Use ctx.save() / ctx.restore() when translating/rotating — prevents messing up later drawings
- Common mistake #1: Set CSS width/height instead of canvas.width/height → blurry output
- Common mistake #2: Forget beginPath() before new shape → connects to previous line
Understood Canvas Coordinates fully now? This is the foundation of all canvas drawing — get this right and everything else becomes easy.
Tell me what you want next — we can build on this:
- Full bouncing ball animation using coordinates?
- Mouse coordinates demo (click shows x,y)?
- Grid-based game board (chess/tictactoe style)?
- Clock face with hour/minute hand using arc + rotate?
- Or 15-question Canvas coordinates quiz?
Just say — we keep going step by step together! 🚀
