A Programmer's Guide to Canvas
Written by Ian Elliot   
Thursday, 24 January 2019
Article Index
A Programmer's Guide to Canvas
Paths
Active and Passive

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

 

 

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

largecover360

 

Contents

  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths
      Extract: SVG Paths
      Extract: Bezier Curves
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes
      Extract: Gradient & Pattern Fills
  5. Transformations
      Extract: Transformations
      Extract: Custom Coordinates 
      Extract  Graphics State
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation 
  9. WebWorkers & OffscreenCanvas
      Extract: Web Workers
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation
  11. Typed Arrays
      Extract: Typed Arrays **NEW!
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files
  13. Image Processing
      Extract: ImageData
      Extract:The Filter API
  14. 3D WebGL
      Extract: WebGL 3D
  15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:1871962625>

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

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

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

Banner
 


JavaScript Jems - Objects Are Anonymous Singletons

JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, every object can be regard [ ... ]



JavaScript Canvas - Typed Arrays

Working with lower level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data.


Other Articles



Last Updated ( Thursday, 24 January 2019 )