HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas setTransform Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw a rectangle, rotate the canvas by using the setTransform method, and draw a rectangle again:

JavaScript:

...
ctx.font="30px Arial";
ctx.fillText("Transform",10,30);
ctx.setTransform(0.93,0.3,-0.3,0.93,0,0);
ctx.fillStyle="lightblue";
ctx.fillRect(0,0,250,100)
...

Try it yourself »

Definition and Usage

The transform method uses a matrix to change the form of the canvas.

The transform method lets you scale, rotate, move, and skew the canvas.

The transformation will only affect drawings made after the transform method is called.

The transform method takes six parameters, representing the matrix.

Differences between setTransform and transform

The transform method behaves relatively to other transformations made by the rotate, scale, or translate methods. I.e. if you have allready set your drawing to scale by two, and the transform method scales your drawings by two, your drawings will now scale by four.

The setTransform method does not behave relatively to other transformations.

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

Browser Support

The setTransform method is supported in all major browsers.

Parameter Values

Parameter	Values	Description	Play it
a	scale-x	Scales the drawings horizontally	Play it »
b	skew-x	Skew the the drawings horizontally	Play it »
c	skew-y	Skew the the drawings vertically	Play it »
d	scale-y	Scales the drawings vertically	Play it »
e	translate-x	Moves the the drawings horizontally	Play it »
f	translate-y	Moves the the drawings vertically	Play it »