HTML canvas setTransform() Method

Introduction

Draw a rectangle, reset and create a new transformation matrix with setTransform():

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)/*  ww w .  j  a va2  s  .  co  m*/

ctx.setTransform(1,0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);

ctx.setTransform(1,0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
</script>

</body>
</html>

The setTransform() method lets you scale, rotate, move, and skew the current context.

The transformation will only affect drawings made after the setTransform method is called. 

context.setTransform(a, b, c, d, e, f);

Parameter Values

Parameter Description
a Scales the drawings horizontally
b Skews the drawings horizontally
c Skews the drawings vertically
d Scales the drawings vertically
e Moves the the drawings horizontally
f Moves the the drawings vertically



PreviousNext

Related