Transformations

Next ❯Compositing

To scale, rotate, translate, or transform current drawing

  • turned_in_notTransformation Related Methods
    • scale()
    • translate()
    • rotate()
    • transform()
    • setTransform()

*In all the below examples the black rectangle is the actual position of other color rectangles



scale( )

Used to scale the current drawing relative to the last effects made by rotate(), scale(), translate(), or transform() onto canvas

Syntax

ctx.scale(scaleX, scaleY)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(10,10,30,20);
ctx.scale(1.5,1.5);
ctx.strokeStyle="red";ctx.strokeRect(10,10,30,20); 
ctx.scale(1.5,1.5);
ctx.strokeStyle="blue";ctx.strokeRect(10,10,30,20);
scalesubject
scaleclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.strokeRect(10,10,30,20);
ctx.scale(1.5,1.5);
ctx.strokeStyle="red";ctx.strokeRect(10,10,30,20);
ctx.scale(1.5,1.5);
ctx.strokeStyle="blue";ctx.strokeRect(10,10,30,20);
</script>
</body>
</html>


translate( )

Used to translate the current drawing relative to the last effects made by rotate(), scale(), translate(), or transform() onto canvas

Syntax

ctx.translate(moveX, moveY)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(20,20,60,30);
ctx.translate(20,20);
ctx.strokeStyle="red";ctx.strokeRect(20,20,60,30);
ctx.translate(20,20);
ctx.strokeStyle="blue";ctx.strokeRect(20,20,60,30);
translatesubject
translateclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
  ctx.strokeRect(20,20,60,30);
  ctx.translate(20,20);
  ctx.strokeStyle="red";ctx.strokeRect(20,20,60,30);
  ctx.translate(20,20);
  ctx.strokeStyle="blue";ctx.strokeRect(20,20,60,30);
</script>
</body>
</html>


rotate( )

Used to rotate the current drawing relative to the last effects made by rotate(), scale(), translate(), or transform() onto canvas

Syntax

ctx.rotate(angle)

/*  To rotate N degree, 
    angle = N * Math.PI/180  
*/
  • Rotation is done relative to the top-left corner of the canvas (0,0)
  • To shift the rotational point we have to use translate() method
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(50,10,50,30);
ctx.rotate(10*Math.PI/180);
ctx.strokeStyle="red";ctx.strokeRect(50,10,50,30);
ctx.rotate(10*Math.PI/180);
ctx.strokeStyle="blue";ctx.strokeRect(50,10,50,30);
rotatesubject
rotateclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
  ctx.strokeRect(50,10,50,30);
  ctx.rotate(10*Math.PI/180);
  ctx.strokeStyle="red";ctx.strokeRect(50,10,50,30);
  ctx.rotate(10*Math.PI/180);
  ctx.strokeStyle="blue";ctx.strokeRect(50,10,50,30);
</script>
</body>
</html>

Syntax - To shift the rotational point 

ctx.translate(shiftPointX, shiftPointY);
ctx.rotate(angle);
ctx.translate(-shiftPointX, -shiftPointY);
We shift the rotational point at the center of black rectangle
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(50,25,50,30);
ctx.translate(75,40);
ctx.rotate(90*Math.PI/180);
ctx.translate(-75,-40);
ctx.strokeStyle="red";ctx.strokeRect(50,25,50,30);
rotate(shiftPoint)subject
rotate(shiftPoint)close
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
  ctx.strokeRect(50,25,50,30);
  ctx.translate(75,40);
  ctx.rotate(90*Math.PI/180);
  ctx.translate(-75,-40);
  ctx.strokeStyle="red";ctx.strokeRect(50,25,50,30);
</script>
</body>
</html>


transform( )

Used to transform the current drawing relative to the last effects made by rotate(), scale(), translate(), or transform() onto canvas

Syntax

ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(10,10,80,40)
ctx.transform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.transform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="blue";ctx.fillRect(10,10,80,40);
transformsubject
transformclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
  ctx.fillRect(10,10,80,40)
ctx.transform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.transform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="blue";ctx.fillRect(10,10,80,40);
</script>
</body>
</html>


setTransform( )

Used to transform the current drawing normally relative to their actual position onto canvas

Syntax

ctx.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(10,10,80,40);
ctx.setTransform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.setTransform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="blue";ctx.fillRect(10,10,80,40);
setTransformsubject
setTransformclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.fillRect(10,10,80,40);
ctx.setTransform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="red";ctx.fillRect(10,10,80,40);
ctx.setTransform(1,0.3,-0.3,1,30,10);
ctx.fillStyle="blue";ctx.fillRect(10,10,80,40);
</script>
</body>
</html>


*Important

To shift back to the 2nd last positions

Syntax- For scale( )
ctx.scale(1/lastScaleX, 1/lastScaleY)
Syntax- For translate( )
ctx.translate(-lastMoveX, -lastMoveY)
Syntax- For rotate( )
ctx.rotate(-lastAngle)

  • Compositing
❮ Prev Filter
Next ❯Compositing
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯