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 ...
Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
