In HTML canvas you can scale, rotate, move, and transform your current drawing.
scale()
The HTML canvas scale() method scales the current drawing (smaller/bigger).
Syntax:
context.scale(scalewidth,scaleheight);Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="scale" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("scale");
var ctx = c.getContext("2d");
ctx.strokeRect(15, 25, 75, 45);
ctx.scale(2, 2);
ctx.strokeRect(15, 25, 75, 45);
</script>
</body>
</html>Output:
rotate()
The HTML canvas rotate() method rotates the current drawing.
Syntax:
context.rotate(angle);Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="rotateCanvas" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("rotateCanvas");
var ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(80, 10, 100, 100);
</script>
</body>
</html>Output:
translate()
The HTML canvas translate() method remaps the (0,0) position on the canvas.
Syntax:
context.translate(x,y);Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="translateCanvas" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("translateCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 80, 80);
ctx.translate(80, 80);
ctx.fillRect(20, 20, 80, 80);
</script>
</body>
</html>Output:
transform()
The HTML canvas transform() method lets you scale, rotate, move, and skew the current context.
Syntax:
context.transform(a,b,c,d,e,f);a – horizontal scaling.
b – horizontal skewing.
c – vertical skewing.
d – vertical scaling.
e – horizontal moving.
f – vertical moving.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="transformCanvas" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("transformCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(50, 0, 100, 100)
ctx.transform(1, 0.5, -0.5, 1, 10, 20);
ctx.fillStyle = "#f4a261";
ctx.fillRect(50, 0, 100, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#e9c46a";
ctx.fillRect(50, 0, 100, 100);
</script>
</body>
</html>Output:
setTransform()
The HTML canvas setTransform() method resets the current transform to the identity matrix and then runs transform() with the same arguments.
The HTML canvas setTransform() method lets you scale, rotate, move, and skew the current context.
Syntax:
context.setTransform(a,b,c,d,e,f);a – horizontal scaling.
b – horizontal skewing.
c – vertical skewing.
d – vertical scaling.
e – horizontal moving.
f – vertical moving.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="setTransform" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("setTransform");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(20, 20, 100, 100)
ctx.setTransform(1,0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#f4a261";
ctx.fillRect(20, 20, 100, 100);
ctx.setTransform(1,0.5, -0.5, 5, 60, 10);
ctx.fillStyle = "#e9c46a";
ctx.fillRect(20, 20, 100, 100);
</script>
</body>
</html>Output:
Enjoy coding!