Skip to content
Related Articles

Related Articles

HTML | canvas transform() Method

Improve Article
Save Article
  • Last Updated : 16 Oct, 2019
Improve Article
Save Article

The transform() method is used to replace the current transformation matrix i.e. each object on the canvas has a current transformation matrix. The transform() method is used to multiply that current transformation matrix with the matrix described below:

a    c    e
b    d    f
0    0    1

It simply allows to scale, move, skew and rotate the current context.

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

Parameter Values:

  • a denotes Horizontal scaling
  • b denotes Horizontal skewing
  • c denotes Vertical skewing
  • d denotes Vertical scaling
  • e denotes Horizontal moving
  • f denotes Vertical moving


<!DOCTYPE html>
    <h3 style="color:green"
    <h3 style="color:green">
      HTML canvas transform() method
    <canvas id="gfgCanvas"
            style="border:2px solid ;">
        var gfg = document.getElementById("gfgCanvas");
        var context = gfg.getContext("2d");
        context.fillStyle = "green";
        context.fillRect(80, 80, 200, 100)
        context.transform(1, 0, 2, 2, 10, 10);
        context.fillStyle = "black";
        context.fillRect(20, 20, 20, 80);


Supported Browsers:

  • Chrome
  • Mozilla Firefox
  • Internet Explorer 9.0
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!