The setTransform() function
Summary: The setTransform() function can be used to scale, skew and translate the canvas
An example of using the
setTransform()
function to skew the canvas. Also see the
transform()
function
for an illustration of the argument order.
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>