Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Translate Transform Tutorial

Description

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.

Demo