Canvas reference: The setTransform() function

The setTransform() function can be used to scale, skew and translate the canvas

The setTransform() function is similar to the transform() function and does the same thing (scale/skew/translate) but it differs in that multiple calls to the transform() function are cumulative - so they mount up (eg a translate by 50px and then a translate by 30px is the same as a translate by 80px). The setTransform() function, however, is not cumulative - the scale, skew and translate are set to precisely what you specify. So in the case just mentioned if you used the setTransform() function instead of the transform() function the resulting translation would be 30px. It can be useful when you aren't sure of what translations have gone before but you want to make sure that a translation (or scale or skew) has been done.

Arguments to the function

Note the order of the arguments.

• The scale factor(X direction)
• The skew factor (X axis)
• The skew factor (Y axis)
• The scale factor(Y direction)
• The translation (X direction)
• The translation (Y direction)

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.setTransform(1,0.25,0.25,1,0.5,0.5);
        
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [1,8,6,3,5]
        }).draw();
    }
</script>

See also:

• An example of the HTML5 canvas transform() and setTransform() functions
  This example shows an interactive example of the transform() function using range inputs. Range inputs work best in Chrome at the current time (September 2013)