Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas setTransform() Method

❮ Canvas Reference

Example

Draw a rectangle. Reset the transformation matrix. Draw the rectangle again. Reset the transformation matrix. Draw the rectangle again.

Each time you call setTransform(), it builds a new matrix. In the example below the red rectangle is not shown because it is under the blue rectangle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)

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

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
Try it Yourself »

Description

The setTransform() method scales, rotates, moves, and skews the context.

Each object on the canvas has a transformation matrix.

The setTransform() method resets the transformation matrix to the identity matrix, and then runs transform() with the same arguments.

Note

The transformation affects drawings made AFTER setTransform() is called.

See Also:

The scale() Method (Scale the context)

The rotate() Method (Rotate the context)

The translate() Method (Remap the 0,0 position)

The transform() Method (Scale, rotate, move, skew context)


Syntax

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

Parameter Values

Parameter Description Play it
a Scales the drawings horizontally Play it »
b Skews the drawings horizontally Play it »
c Skews the drawings vertically Play it »
d Scales the drawings vertically Play it »
e Moves the the drawings horizontally Play it »
f Moves the the drawings vertically Play it »

Return Value

NONE

Browser Support

The <canvas> element is an HTML5 standard (2014).

setTransform() is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference