Drawing coordinates

Learn the canvas coordinate system and origin point.

The coordinate system

The canvas is a pixel grid. The origin, the point (0, 0), sits at the top-left corner. The x axis grows to the right, the y axis grows downward.

This differs from the coordinate system in math, where y grows upward. On the canvas y grows downward because screen coordinates work that way. To name a point, write x first, then y: (100, 50).

The pixel grid

Every drawing coordinate is in pixels. The canvas.width and canvas.height properties give the total pixel size of the surface. All coordinates stay within these bounds.

The bottom-right corner sits near (canvas.width, canvas.height). When drawing, take care not to go past these bounds; otherwise the shape stays off screen and gets lost. Always keep the canvas size in mind when you calculate coordinates.

Exercise Bottom corner coordinate

Log the bottom-right corner coordinate of the canvas. Use canvas.width for the width and canvas.height for the height. Log both values with console.log, separated by a comma.

Show example solution

console.log(canvas.width, canvas.height);

Test yourself

Where is the origin (0, 0) in the canvas coordinate system?
- Bottom-right corner
- Bottom-left corner
- Top-left corner
- Top-right corner
Show answer

Top-left corner — Correct! The origin is at the top-left corner; x grows right, y grows down.
Origin coordinate
```
ctx.moveTo(____);
```
Show answer
```
ctx.moveTo(0, 0);
```
Match the coordinate system

(0, 0)

top-left corner
x axis

horizontal right
y axis

vertical down
pixel

grid unit

Next lesson: Drawing rectangles

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies