Canvas Transform

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/

http://www.w3schools.com/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s