Summary  
This chapter explains the pixel-based coordinate system on a canvas where the origin (0,0) sits at the top-left corner, the x-axis extends rightward, the y-axis extends downward, and all positions correspond directly to pixel coordinates.

General domain of usage  
2D drawing and animation

Understanding the **canvas coordinate system** is essential for precise drawing and animation. On an HTML canvas, the coordinate system defines how you specify the position of shapes, lines, and images. The **origin**, or point `0,0`, is located at the **top-left corner** of the canvas. The **x-axis** extends horizontally to the right, while the **y-axis** extends vertically downward. Every position you specify is measured in units of **pixels**, which are the smallest addressable elements on your display.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxNTAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIERyYXcgYSBzbWFsbCByZWQgcG9pbnQgYXQgdGhlIG9yaWdpbiAoMCwwKQogICAgICBjdHguZmlsbFN0eWxlID0gInJlZCI7CiAgICAgIGN0eC5maWxsUmVjdCgwLCAwLCA1LCA1KTsKCiAgICAgIC8vIERyYXcgYSBzbWFsbCBibHVlIHBvaW50IGF0ICgxMDAsIDUwKQogICAgICBjdHguZmlsbFN0eWxlID0gImJsdWUiOwogICAgICBjdHguZmlsbFJlY3QoMTAwLCA1MCwgNSwgNSk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

The coordinates you use are always relative to the canvas itself. For example, if your canvas is **300 pixels wide** and **150 pixels high**, the bottom-right corner has the coordinates `(300,150)`. If you try to draw outside these bounds, your shapes will not appear on the visible canvas. This **pixel-based system** means that every value you provide for `x` and `y` directly corresponds to a physical pixel location on the canvas, making positioning predictable and straightforward.

Where is the origin (0,0) located on the canvas coordinate system?

What units are used for coordinates on the canvas?

Create visual and interactive projects with the HTML Canvas API using plain JavaScript. Draw shapes, render text, work with images, and control colors, gradients, and pixels. Animate objects, handle user input, and build simple games and visual effects step by step.

Learn how the Canvas element works and how to access its drawing context. Work with coordinates and master essential drawing techniques for lines, shapes, and paths. Build the foundation needed for everything from graphics to games.

Enhance your visuals with text rendering, image drawing, gradients, and patterns. Explore the basics of pixel manipulation and add simple user interaction with mouse and keyboard input. Create richer and more expressive canvas graphics.

Use the Canvas API to animate objects, simulate motion, and build interactive experiences. Combine physics, drawing operations, and input handling to create small games and visual effects. Apply all your skills in fun, practical mini-projects.

Canvas Coordinate System

1. Where is the origin (0,0) located on the canvas coordinate system?

2. What units are used for coordinates on the canvas?

Awesome!

Canvas Coordinate System

1. Where is the origin (0,0) located on the canvas coordinate system?

2. What units are used for coordinates on the canvas?