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