HTML canvas setTransform() Method

❮ HTML canvas Reference

Example

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50)

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#4985ed";
ctx.fillRect(0, 0, 50, 50);

Meaning

The setTransform() method resets the current transform to the identity matrix.


Standard Syntax

JavaScript syntax:

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



Browser Support




Status







Parameter Values

Parameter Description
a Horizontal scaling
b Horizontal skewing
c Vertical skewing
d Vertical scaling
e Horizontal moving
f Vertical moving
❮ HTML canvas Reference