Canvas Transform

You are Here:

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

aSpecifies horizontal scaling. Default value is 1.
bSpecifies vertical skewing.
cSpecifies horizontal skewing.
dSpecifies vertical scaling. Default value is 1.
eSpecifies horizontal translation.
fSpecifies vertical translation.


Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Canvas.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author