Canvas Transform

Last Updated:

How to Transform

ctx.transform() canvas method multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.

Your browser does not support the canvas element.

This example skews a rectangle both vertically (.1) and horizontally (.4). Scaling and translation remain unchanged.

Help Tips: Learn how to draw a canvas rectange.


HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="150" height="120"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); ctx.transform(1, .1, .4, 1, 0, 0); ctx.fillStyle = "#339933"; ctx.fillRect(0, 0, 100, 100); </script> </body> </html>


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

Attributes Value

a Specifies horizontal scaling. Default value is 1.
b Specifies vertical skewing.
c Specifies horizontal skewing.
d Specifies vertical scaling. Default value is 1.
e Specifies horizontal translation.
f Specifies vertical translation.

Share this Page

Meet the Author