Page 3 of 3
Active and passive view
The transformation operations are all very easy but it is worth recalling that transformations have two completely different interpretations and uses.
 The first is often called the active view which is that the transformation moves and modifies what is being drawn.
 The second is often called the passive view and corresponds to thinking of the transformation as a change in the coordinate system.
Both views are useful when programming  lets take a look at an application of each in turn.
The active view of transformation uses them to draw an graphics object at another location.
For example to draw a rectangle at a different angle we could use:
ctx.translate(100,100); ctx.rotate(Math.PI/4); ctx.fillRect (0, 0, 55, 50);
This first moves the origin to 100,100 and then rotates by 45 degrees  the rectangle is now drawn with its top lefthand corner at 100,100 and rotated. Notice that this is not the same as rotating then translating  try it and see.
The passive view of the transformation simply changes the coordinate system and you just draw using the new coordinates.
Now let's try a change in the coordinate system to make plotting a graph easy. In principle you could plot a sin function using:
ctx.beginPath(); ctx.moveTo(0,0); for(var i=0;i<4*Math.PI;i+=0.1){ ctx.lineTo(i,Math.sin(i)); } ctx.stroke();
However, if you try it you will just see a small splodge at the top of the canvas. The reason is, of course that the x value varies from 0 to about 12 and the y value varies between +1 and 1.
You can use constants to scale and shift the graph to make it fit in with the current coordinate system if you want to. For example:
ctx.beginPath(); ctx.moveTo(0,50); for(var i=0;i<4*Math.PI;i+=0.1){ ctx.lineTo(i*10,10*Math.sin(i)+50); } ctx.stroke();
This produces a reasonable sine wave but a much cleaner method of plotting graphs is to make use of the transformation to provide the coordinates that we would really like to use.
We would like a coordinate system that varied between 0 and 12 in the x direction and +1 and 1 in the y direction. If we assume that the canvas is 400x400 then the change in the coordinate system can be created using:
ctx.scale(400/12,400/2) ctx.translate(0,1); ctx.beginPath(); ctx.moveTo(0,0); for(var i=0;i<4*Math.PI;i+=0.1){ ctx.lineTo(i,Math.sin(i)); } ctx.lineWidth=2/400; ctx.stroke();
First we scale so that the x axis runs from 0 to 12 and the y axis from 0 to 2. Then we translate so the the y axis runs from 1 to 1.
The only complication is that that the transformation affects every measured aspect of the drawing, including line width. So we have to reduce the line width back to roughly one pixel in expressed in the new coordinate system.
In general to create a coordinate system that runs from xmin to xmax and ymin to ymax with a canvas of size width by height you need to first perform a scaling :
scale(width/(xmaxxmin),height/(ymaxymin));
followed by a translate:
translate(xmin,ymin);
Coming soon: Working with bitmaps and canvas.
If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook, Digg or you can subscribe to our weekly newsletter.
