HTML canvas transform() Method

Introduction

Draw a rectangle, add a new transformation matrix with transform().

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)/*from  w w w. j  a v  a  2 s.co m*/

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

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

</body>
</html>

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix.

It multiplies the current transformation matrix with the matrix described by:

a c e
b d f
0 0 1

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

The transformation will only affect drawings made after the transform() method is called. 

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

Parameter Values

Parameter Description
a Scales the drawing horizontally
b Skew the the drawing horizontally
c Skew the the drawing vertically
d Scales the drawing vertically
e Moves the the drawing horizontally
f Moves the the drawing vertically



PreviousNext

Related