transform() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:transform

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. transform

Description

transform() method can scale, rotate, move, and skew the current context.

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

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" 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, 50, 100)//from   w w w.  j a  va  2s . co m

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

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

</script>

</body>
</html>

Related Tutorials