What are the coordinate systems used in HTML5 canvas?

HTML5 Canvas uses a 2D Cartesian coordinate system with (0, 0) at the top-left corner, where the x-axis increases to the right and the y-axis increases downward, differing from the traditional mathematical model; this system is pixel-based, origin-fixed at the top-left, and supports transformations like translate, scale, rotate, and transform for manipulating the coordinate space, as demonstrated by moving the origin to the center to simplify drawing; additionally, while the logical coordinate system maps to CSS pixels, high-DPI displays require backing store scaling to maintain sharpness, meaning the canvas width and height are set to higher physical pixel counts than the displayed size, but the coordinate system still aligns with the CSS layout dimensions, ensuring screen-friendly and practical web graphics rendering.

HTML5 Canvas uses a 2D Cartesian coordinate system to determine the position of pixels on the canvas surface. Here's how it works and what you need to know:

The Default Canvas Coordinate System

The canvas element has its own built-in coordinate system that starts at the top-left corner of the canvas with the point (0, 0).

• The x-axis increases from left to right.
• The y-axis increases from top to bottom.

This is different from the traditional mathematical coordinate system (where y increases upward), and it's more typical of screen-based graphics systems.

For example:

• A point at (50, 100) is 50 pixels from the left edge and 100 pixels down from the top.
• If your canvas is 800×600 pixels, the bottom-right corner would be at (799, 599), since pixel coordinates are zero-based.

Key Characteristics

• Origin at (0,0): Top-left of the canvas.
• Pixel-based: Coordinates map directly to pixels on the screen (though scaling can affect this).
• No built-in 3D system: The standard 2D context (2d) is strictly for 2D drawing. For 3D, WebGL uses a different, normalized coordinate system.

Coordinate Transformations

You can manipulate the coordinate system using methods in the 2D rendering context:

• translate(x, y) – moves the origin to a new location.
• scale(x, y) – scales the coordinate system (e.g., 2.0 doubles size).
• rotate(angle) – rotates the axes around the origin (in radians).
• transform() / setTransform() – allows full control over the transformation matrix.

These let you work in more convenient local coordinate spaces when drawing complex scenes.

Example: Moving the Origin

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Move origin to center of canvas
ctx.translate(canvas.width / 2, canvas.height / 2);

// Now (0, 0) is the center
ctx.fillRect(-10, -10, 20, 20); // Draws a square centered

This is useful for rotating objects around their center or creating screen-space effects.

Note on High-DPI (Retina) Displays

While the coordinate system remains logical (in CSS pixels), you may need to scale the canvas backing store to avoid blurry graphics on high-DPI screens. This involves setting the canvas width/height to more physical pixels than the displayed size, but the coordinate system still maps to the CSS layout size.

So, in short:
HTML5 Canvas uses a 2D pixel-based coordinate system with (0,0) at the top-left, x increasing right, and y increasing down — and you can transform it using built-in methods.
Basically, it’s screen-friendly and practical for web graphics.

The above is the detailed content of What are the coordinate systems used in HTML5 canvas?. For more information, please follow other related articles on the PHP Chinese website!