Folks,

This is one of the significant concept in canvas. Lets dive in deeper to understand it clearly.

Before we start up with this, first you should know what is shear matrix, translation matrix(explained with translation matrix).

Representation of shear can be found here

Representation of translation can be found here

Lets know what is scaling in canvas too

Lets begin the transform show 😉

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the matrix described by:

a | c | e |

b | d | f |

0 | 0 | 1 |

Shear and translation matrix representation

a | sx | tx |

sy | d | ty |

0 | 0 | 1 |

In other words, the transform() method lets you scale, rotate, move, and skew the current context.

**Note:** The transformation will only affect drawings made after the transform() method is called.

**Note:** The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four.

JavaScript syntax: | context.transform(a,b,c,d,e,f); |
---|

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 » |

Now its very simple,

You can some requirement to skew up/down (or) shear matrix?? – context.transform(a, sy, sx, d, e, f);

You can some requirement to translate x/y coordinates (or) translate matrix?? – context.transform(a, b, c, d, tx,ty);

You can some requirement to Scale Up/down ?? – context.transform(scale-x, b, c, scale-y, e,f);

Now in total i represent entire transform syntax like this..

transform(scale-x, sy, sx, scale-y, tx,ty);

I hope its very clear now in way of using transform with your requirement :D. Good luck

You can refer below sites too:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

http://www.html5canvastutorials.com/