The canvas coordinate system

X AXIS IS HORIZONTAL, DIRECTED TO THE RIGHT
Y AXIS IS VERTICAL, DIRECTED DOWNWARDS

The coordinate system used for drawing in canvases is similar to the one used by many drawing APIs like Java2D: the (0 , 0) is in the top left corner while the X axis is going to the right and the Y axis to the bottom, as  shown in the following picture (author Mark Pilgrim):

coordinate system

 

Typical use of the <canvas> element

1 – Add the <canvas> element into an HTML page

  1. <canvas id=“myCanvas” width=“300” height=“225”>
  2.     Fallback content that will be displayed in case the web browser
  3.     does not support the canvas tag or in case scripting
  4.     is disabled.
  5. </canvas>

Place code similar to the above somewhere in an HTML page. This example defines an area of 300 by 225 pixels on which content can be rendered with JavaScript.

Normally you should see nothing as a result; by default canvases are “transparent”.

Make it visible using CSS:

CSS code:

  1. <style>
  2.     #myCanvas {
  3.         border:1px solid black;
  4.     }
  5. </style>

2 – Select the <canvas> element for use from JavaScript

We can have more than one <canvas> in a single page, and canvases will be manipulated with JavaScript like other elements in the DOM.

For example with:

  1. var canvas = document.getElementById(“myCanvas”);

… or with the querySelector() method introduced by HTML5, that use the CSS selector syntax for selecting elements:

  1. var canvas = document.querySelector(“#myCanvas”);

3 – get a “2D context” associated with the canvas, useful for drawing and setting drawing properties (color, etc.)

Once we have a pointer to the <canvas>, we can get a “context”.

This particular object is the core of the canvas JavaScript API.

It provides methods for drawing, like fillRect(x, y, width, height) for example, that draws a filled rectangle, and properties for setting the color, shadows, gradients, etc.

Getting the context (do this only once):

  1. var ctx=canvas.getContext(‘2d’);

Set the color for drawing filled shapes:

  1. ctx.fillStyle=‘red’;

Draw a filled rectangle:

  1. ctx.fillRect(0,0,80,100);

COMPLETE EXAMPLE THAT DRAWS A FILLED RECTANGLE IN RED

Try it online at JS Bin

Result:

red rectangle draw in a canvas

Source code:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4.  <style>
  5.      #myCanvas {
  6.          border: 1px solid black;
  7.      }
  8.  </style>
  9.    var canvas, ctx;
  10.  
  11.    function init() {
  12.      // This function is called after the page is loaded
  13.      // 1 – Get the canvas
  14.      canvas = document.getElementById(‘myCanvas’);
  15.      // 2 – Get the context
  16.      ctx=canvas.getContext(‘2d’);
  17.      // 3 – we can draw
  18.      drawSomething();
  19.    }
  20.    function drawSomething() {
  21.      // draw a red rectangle
  22.      ctx.fillStyle=‘#FF0000’;
  23.      ctx.fillRect(0,0,80,100);
  24.    }
  25. </head>
  26. <body onload=init();>
  27.     <canvas id=“myCanvas” width=“200” height=“200”>
  28.             Your browser does not support the canvas tag.
  29.     </canvas>
  30. </body>
  31. </html>

Explanation

Only access elements when the DOM is ready:

Notice that we wrote an “init” function (line 12) that is called only when the page has been entirely loaded (we say “when the DOM is ready”). There are several ways to do this. In this example we used the <body onload=”init();”> method, at line 32.

It’s good practice to have such a function, as we cannot access the elements of the page before the page has been loaded entirely and before the DOM is ready.

Another way is to put the JavaScript code at the end of the document (between …), right before the </body>. In this case when the JavaScript code is executed, the DOM has already been constructed.

Start by getting the canvas and the context:

Before drawing or doing anything interesting with the canvas, we must first get its drawing “context”. The drawing context defines the drawing methods and properties we can use.

Good practice is to get the canvas, the context, the width and height of the canvas and other global objects in this “init” function.

After the context is set, we can draw, but first let’s set the current color for filled shapes:

The example shows the use of the fillStyle property at line 27 – useful for specifying the way shapes will be filled. In our case this line indicates the color of all the filled shapes we are going to draw:

  1. ctx.fillStyle=‘#FF0000’;

The context property named fillStyle is used here. This property can be set with a color, a gradient, or a pattern. We will see examples of these later on in the course.

When we set it with a color, we use the CSS3 syntax.

The example says that all filled shapes will use the color “#FF0000”, which corresponds to a pure red color using the CSS RGB hexadecimal encoding (we could also have used ctx.fillStyle=’red’);

Then we can draw:

  1. ctx.fillRect(0,0,80,100);

This line is a call to the method fillRect(top left X coordinate, top left Y coordinate, width, height), which draws a filled rectangle.

The way the rectangle will be filled depends on the current value of several properties of the context, in particular the value of the fillStyle property. So, in our case, the rectangle will be red.

SUMMARY OF THE DIFFERENT STEPS

    1. Declare the canvas, remembering to add an id attribute, and fallback content:
      <canvas id=”myCanvas” width=”200″ height=”200″>
      …fallback content…
      </canvas>
    2.  Get a reference to the canvas in a JavaScript variable using the DOM API:
      var canvas=document.getElementById(‘myCanvas’);
    3. Get the context for drawing in that canvas:
      var ctx=canvas.getContext(‘2d’);
    4. Specify some drawing properties (optional):
      ctx.fillStyle=’#FF0000′;
    5. Draw some shapes:
      ctx.fillRect(0,0,80,100);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s