A Programmer's Guide to Canvas
Written by Ian Elliot   
Article Index
A Programmer's Guide to Canvas
Stacks of states

  graphicsicon

Transformations

The drawing context has a transformation matrix associated with it and every pair of co-ordinates is multiplied by this matrix before drawing occurs.

When the context is created the matrix is set to the identity which means you are drawing using the default pixel co-ordinates. However, there are a set of methods that can be used to set the transform to anything you like.

A general transformation takes the form:

x'= ax + cy + e
y'= bx + dy + f

The values of a,c,b, d specify a rotation, a scaling or a skew depending on their values. The values e and f specify a shift of the origin to the new location e,f.

This is all you need to know but to understand the way that these transformations are presented is it worth knowing about homogeneous co-ordinates.

The transformation can be written in matrix form as:

    p'=Ap+t

where in terms of the previous tranformation values we have:

= (a c)
    (b d)

p'=(x') p=(x) t=(e)
   (y')   (y)   (f)

 

Notice that the rotation/scale/skew part of the transformation can be written as a matrix multiplication, but the translation is an untidy part that we have to add.

The whole transformation can be written as a matrix multiplication if we add an extra dummy dimension, set to 1, that we simply ignore when actually drawing.

That is the transformation can be written:

    p'=Tp

where

T = (a c e)
    (b d f)
    (0 0 1)

p'=(x') p=(x)
   (y')   (y)
   (1 )   (1)

 

So now you know that homogenous co-ordinates are just a trick that let us treat translation, along with rotation etc, as part of a matrix multiplication.

This is how the Canvas transformation works - you specify a 3x3 matrix in homogenous co-ordinates - which is used to multiple the co-ordinates you specify before any drawing operation.

Now to return to the details of the programming. We have a method:

setTransform(a,b,c,d,e,f)

which sets the transformation to the matrix specified and a method

transform(a,b,c,d,e,f)

which multiplies the existing transformation matrix by the one specified.

Setting the transformation in this general way is powerful but also a bit abstract and difficult.

To make things easier we also have:

  • scale(x,y) which applies a scaling in the x and y direction to the transformation matrix
  • rotate(angle) which applies a rotation angle in the clockwise direction; the angle is measured in radians
  • translate(x,y) which performs a translation by x,y

 

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 co-ordinate 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.

rotate

 

The passive view of the transformation simply changes the co-ordinate system and you just draw using the new co-ordinates.

Now let's try a change in the co-ordinate 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 co-ordinate 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 co-ordinates that we would really like to use.

We would like a co-ordinate 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 co-ordinate 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 co-ordinate system.

sine

In general to create a co-ordinate 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/(xmax-xmin),height/(ymax-ymin));

followed by a translate:

translate(-xmin,-ymin);

 

graphicsicon

Related Articles

Canvas bitmap operations - bitblt in JavaScript

Getting started with SVG for HTML5

SVG, JavaScript and the DOM

Getting started with WebGL

Getting Started with Box2D in JavaScript

  

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.

 

Banner
 


Just JavaScript - The Prototype Mechanism

The prototype is about the most mysterious part of JavaScript. Once you have mastered the call context and the constructor, it is the prototype that you have to turn to. How does it work? How do you u [ ... ]



Getting Started With jQuery - Advanced Filters

When you first encounter filters they seem easy enough - just extract the results you want from the results you have. The trouble is that filters are fun and jQuery pushes the idea beyond the obvious. [ ... ]


Other Articles

 

blog comments powered by Disqus



Last Updated ( Tuesday, 23 September 2014 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.