JavaScript Canvas Custom Coordinates
Written by Ian Elliot   
Monday, 19 July 2021
Article Index
JavaScript Canvas Custom Coordinates
Plotting A Graph

Plotting A Graph

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, which in pixel co-ordinates gives you the small splodge!

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 varies 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 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 expressed in the new co-ordinate system.

sine

In Chapter But Not In This Extract

  • Stack of States
  • Active Transformations and State

Summary

  • Transformations include rotation, scaling and translation.

  • You can write all three as a simple matrix if you use homogeneous co-ordinates (x,y,1)

  • You can set the transform matrix directly or use one of the utility methods to set scaling, rotation and translation.

  • The order in which you apply transformations makes a difference.

  • You can think of transformations as actively moving something or just changing the co-ordinates. Canvas transforms change the co-ordinate system.

  • If you want to think “actively” then think of the transformations you want to perform on a shape and then apply them in the reverse order before drawing the shape.

  • One approach to organizing graphics is to draw everything centered on the origin and at unit scale and then use transformations to size, rotation and position where you really want to draw the shape.

  • You can change the co-ordinate system in use to anything that suits the current drawing task.

  • You can save the drawing state before changing the co-ordinate system so that it can be restored.

  • The drawing state includes the current transformation matrix, clipping region and all drawing attributes.

 

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: Bezier Curves 
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes 
  5. Transformations
      Extract: Transformations
      Extract: Custom Coordinates 
  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: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation  **NEW!
  11. Typed Arrays
  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
  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.

square

 



 

Comments




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



Last Updated ( Monday, 19 July 2021 )