O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required