TRANSLATE THE X- AND Y-AXES
The origin, the name for the point at (0, 0), is in the top-left corner of the canvas element. Whereas this works well enough if you are just starting out drawing on the canvas — increase x to go right, increase y to go down — it does make things a little more difficult to understand if you have multiple objects to draw together as a group, especially if that group is positioned at multiple relative locations on the canvas.
In fact, this will become a major problem when you start working with canvas animations. Imagine that you have a group of shapes that make up a character in a game, and the character moves from right to left on the screen. You could calculate the absolute x and y coordinates for all points to build ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access