To translate the HTML5 Canvas context, we can use the translate() transform method. Translations enable us to move entire pieces of the canvas with just one method. For example, if we have a function that draws a complex drawing onto the canvas, and we need a way to move the drawing around, it's much easier to translate the context than it is to adjust the x and y position of all the points that make up the drawing.
Transformations work by first transforming the canvas context, and then drawing onto it. In this tutorial, we'll translate the canvas context, and then draw a rectangle at position (0,0). Since the context was translated, the rectangle will be translated as well.
Code Editor
Modified on April 9th, 2013
by Eric Rowell