2.13. Transformations

As mentioned in Section 2.1, “The Coordinate System,” on p. 67, you can translate, rotate, and scale the Canvas coordinate system, and there are plenty of good reasons to do one or all of those things.

It’s often useful to translate the origin to someplace other than the upper-left corner of the canvas, which is its default location. Fundamentally, translating the origin simplifies the calculations you need to make to position shapes and text within the canvas. For example, you can draw a rectangle centered in the canvas, like this:

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    RECTANGLE_WIDTH = 100,
    RECTANGLE_HEIGHT = 100;

context.strokeRect(canvas.width/2 - RECTANGLE_WIDTH/2,
                   canvas.height/2  - RECTANGLE_HEIGHT/2,
                   RECTANGLE_WIDTH, RECTANGLE_HEIGHT);