HTML5 Canvas Reference - transform()
By using transformation matrix
the transform() method can
scale, rotate, move, and skew the current context.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
transform() |
Yes | Yes | Yes | Yes | Yes |
JavaScript syntax
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 |
Example
The following code rotates the drawing content twice.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width='500px' height='200px'/>
<script type='text/javascript'>
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
<!-- w w w . j a va 2 s . c o m-->
ctx.fillStyle = "tomato";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.4, -0.4, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.6, -0.6, 1, 30, 10);
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 250, 100);
</script>
</body>
</html>
The code above is rendered as follows: