Canvas setTransform() Method

Watch a demo of different values of the setTransform() method.

Or click a specific value to see the result:

setTransform(1,0,-1,1,0,0);
setTransform(1,0,-0.5,1,0,0);
setTransform(1,0,-0.2,1,0,0);
setTransform(1,0,-0.1,1,0,0);
setTransform(1,0,0,1,0,0);
setTransform(1,0,0.1,1,0,0);
setTransform(1,0,0.2,1,0,0);
setTransform(1,0,0.5,1,0,0);
setTransform(1,0,1,1,0,0);
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.setTransform(1,0,-0.5,1,0,0);
ctx.fillStyle='lightblue';
ctx.fillRect(10,10,250,100);
ctx.fillStyle='red';
ctx.font='30px Arial';
ctx.fillText('Transform', 60,80);

Play more with the code in our Tryit yourself editor: Try it Yourself ❯