How does the canvas coordinate system work in HTML5?

The HTML5 canvas coordinate system has its origin (0, 0) at the top-left corner, with x increasing to the right and y increasing downward; 1. Coordinates are pixel-based, where positions like (10, 20) mean 10 pixels from the left and 20 from the top; 2. The logical grid depends on the canvas element’s width and height attributes, not its CSS-styled size, so scaling may affect appearance but not coordinate values; 3. Drawing methods such as fillRect(x, y, width, height), arc(x, y, radius, startAngle, endAngle), and drawImage(img, x, y) all use this system to place graphics; 4. Transformations like ctx.translate(x, y), ctx.rotate(angle), and ctx.scale(sx, sy) can alter the coordinate system for subsequent operations, and using ctx.save() before and ctx.restore() after transformations helps maintain control over the drawing state. Understanding this system is essential for precise and predictable rendering on the canvas.

The canvas coordinate system in HTML5 is a 2D grid used to draw shapes, text, images, and other graphics on a <canvas></canvas> element. Understanding how it works is essential for precise rendering.

Origin is at the top-left corner

Unlike traditional Cartesian coordinate systems, the canvas origin (0, 0) is at the top-left corner of the canvas element. As you move:

• Right along the x-axis, the x value increases.
• Down along the y-axis, the y value increases.

So, if your canvas is 500×300 pixels:

• Top-left: (0, 0)
• Top-right: (500, 0)
• Bottom-left: (0, 300)
• Bottom-right: (500, 300)

This is standard for most computer graphics systems.

Coordinates are measured in pixels

All positions, lengths, and sizes are specified in CSS pixels. If you draw a line from (10, 20) to (60, 70), it means 10 pixels from the left, 20 from the top, etc.

Keep in mind that if the canvas element is styled with CSS to a different size than its internal width and height attributes, the coordinate system scales visually — but the logical coordinate grid remains based on the width and height attributes.

For example:

<canvas width="200" height="100"></canvas>

This creates a canvas with 200 columns and 100 rows of pixels, regardless of how large it appears on screen.

Used in drawing operations

Every drawing method uses this coordinate system:

• fillRect(x, y, width, height) – draws a rectangle starting at (x, y)
• arc(x, y, radius, startAngle, endAngle) – draws an arc centered at (x, y)
• drawImage(img, x, y) – places the top-left of the image at (x, y)

So if you call:

ctx.fillRect(50, 100, 30, 40);

You're drawing a filled rectangle that starts 50 pixels from the left and 100 pixels from the top, and is 30 pixels wide and 40 pixels tall.

Coordinate transformations are possible

You can modify the coordinate system using:

• ctx.translate(x, y) – moves the origin
• ctx.rotate(angle) – rotates the axes
• ctx.scale(sx, sy) – changes the scale of the grid

These transformations affect all subsequent drawing operations. For example, after translate(100, 50), the new origin (0, 0) is at the old (100, 50) position.

It's often useful to use ctx.save() before transforming and ctx.restore() afterward to return to the previous state.

Basically, the canvas coordinate system is simple but powerful — it’s a pixel-based grid starting at the top-left, and every drawing command relies on it. Getting comfortable with it makes drawing much more predictable.

The above is the detailed content of How does the canvas coordinate system work in HTML5?. For more information, please follow other related articles on the PHP Chinese website!