An example of the canvas transform() and setTransform() functions

Written by Richard Heyes, on 2nd February 2013

An example of and guide to the transform() function (and also the setTransform() function)


The setTransform() and transform() functions use "matrix" calculations to transform the canvas. What does this mean? In practice it's a combination of the scale() and translate() functions and also allows the skewing of the canvas. So if you don't need skewing then you can quite realistically get by with the scale and translate functions. A transform looks like this:

context.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

And these arguments are:

The difference between the two functions is that the transform() function adds to whatever transformations that you've done before. So this:


Is the same as doing this:


And if you do another setTransform(1,0,0,1,30,30) call - it remains the same.

Browser support

All browsers suppport the transform() and setTransform() functions - though in the example below not all browsers support the HTML5 range input (the slider) - so you may see text inputs instead.

Your browser:

Internet Explorer:

An example

This example allows you to see the effect of each type of transformation. Keep in mind that the order of the arguments is not immediatley obvious - so the appropriate code is shown below the chart.

[No canvas support]
Scale X:
Scale Y:
Skew X:
Skew Y:
Translate X:
Translate Y:


The transform() vs setTransform() functions

At first the two functions may seem similar. However when you start to do multiple transformations the difference may become apparent. The transform() function ADDS the transformation that you give it to whatever the current transformation is. Whereas the setTransform() SETS it to whatever you give it.

context.transform(1,0,0,1,5,5); // A translate by [5,5]
context.transform(1,0,0,1,5,5); // A translate by [5,5]
context.transform(1,0,0,1,5,5); // A translate by [5,5]
context.transform(1,0,0,1,5,5); // A translate by [5,5]
[No canvas support]

Has the same result as this:

context.setTransform(1,0,0,1,20,20); // A translation of [20,20]
[No canvas support]

An ellipse example

Like the example shows, the scale part of the transformation (or the stand-alone scale function) can be used like the example below to scale the canvas in the appropriate direction so that a standard circle becomes an ellipse.

[No canvas support]
    context = document.getElementById("cvs").getContext('2d');

    context.fillStyle = 'red';
    context.lineWidth = 4;
    context.arc(75,50,35,0,2 * Math.PI, true);

Using translate for anti-aliasing

By default canvas will have blurry lines if you use whole pixels (no decimals) for coordinates such as: context.fillRect(50,50,10,10); You can avoid this though if you simply translate the canvas by half a pixel before-hand and then always use whole numbers to draw with: context.translate(0.5, 0.5) Keep in mind though that if you clear the canvas by setting the width to itself - this also removes any translation or other transformation that you may have performed - so you will need to do the anti-aliasing fix again.

Other transformation functions

There are other transformation functions such as: