HTML5 Transformation - Use transform function

In the previous post HTML5 Canvas - How to apply transformation, I talked about fundamentals of HTML5 canvas transformation. I focused the discussion on two function, translate and rotate. But graphics transformations is not just limited to translation and rotation. There is lot more to transformation. Lets look at transformation functions in canvas api one more time.

• context.scale(x, y)
• context.rotate(angle)
• context.translate(x, y)
• context.transform
• context.setTransform(a, b, c, d, e, f)

transform and setTransform functions provide finer control on transformation. But before you use these functions, it is very important that you understand what kind of transformation 6 parameters a,b,c,d,e and f apply. These 6 parameters are part of the transformation matrix below.

a	c	e
b	d	f
0	0	1

Transformation Matrix Components

Identity Matrix (No transformation)
a: Scale along x-axis
b: Skew along y-axis
c: Skew along x-axis
d: Scale along y-axis
e: Translate along x-axis
f: Translate along y-axis

As you can see that my manipulating these individual matrix components you can create some very powerful graphics and animation effects.

thisDemo.graphics.drawingCtx.transform(thisDemo.a, thisDemo.b, thisDemo.c, thisDemo.d, thisDemo.e, thisDemo.f);

See it in action

I have implemented a demo application that allows you to play with these 6 parameters to see the effect on transformation.

HTML5 Transformation Demo

In subsequent posts, I will discuss more on transformations to show some cool animations.