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 CYBERSECURITY DATA SCIENCE
     ❯   

Canvas transform() Method

❮ Canvas Reference

Example

Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, then draw the rectangle again. Notice that each time you call transform(), it builds on the previous transformation matrix:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

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

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

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


Description

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

Each object on the canvas has a transformation matrix.

The transform() method replaces the transformation matrix, and multiplies the it with a matrix described by:

a c e
b d f
0 0 1

Notes

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

The transformation is relative to other rotate(), scale(), translate(), or transform() transformations. If you scale by two, and transform() scales by two, the drawings will scale by four.

See Also:

The scale() Method (Scale the context)

The rotate() Method (Rotate the context)

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

The setTransform() Method (Scale, rotate, move, skew context).


Syntax

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

Parameter Values

Param Description Play it
a Scales the drawing horizontally Play it »
b Skew the the drawing horizontally Play it »
c Skew the the drawing vertically Play it »
d Scales the drawing vertically Play it »
e Moves the the drawing horizontally Play it »
f Moves the the drawing vertically Play it »

Return Value

NONE

Browser Support

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

transform() is supported in all modern browsers:

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

❮ Canvas Reference