The Ultimate Beginner’s Guide to HTML5 Canvas

Canvas, a HTML5 element that can be used for rendering graphics, animation, graphs, photo compositions or any other visual objects on the fly by using JavaScript. In this tutorial, we will describe how to implement canvas in your web projects.

The Full Series

Supported Browsers

Before we start our tutorial, let’s check out whether your browser support this latest technology or not. Below is the list of the browsers that officially canvas supported:

Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)

Getting Start

Let’s start the tutorial by looking at the <canvas> element itself.

<canvas id=”myCanvas” width=”300″ height=”300″>

The <canvas> element is looks like other HTML elements. There are 2 important attributes that you have to specify, which is width and height of your draw-able area (Note: Please specify the width and height by using canvas itself, instead of CSS to prevent any distorted visual problem). Besides, it is also good idea to include id attribute for your canvas element, which can be accessed by JavaScript later.

So your <canvas> element will be looks like this in your HTML document:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
   </head>
   <body>
      <canvas id=”myCanvas” width=”300″ height=”300″>
         <!– Insert fallback content here –>
         Sorry, your browser doesn’t support canvas technology.
      </canvas>
   </body>
</html>

It is always a good practice to include fallback content within your <canvas> element, because it is still relatively new and isn’t implemented in some browsers, such as Internet Explorer 7 and 8.

The Coordinate System

The coordinate system is one of the most important knowledge you need to know before draw on canvas. If you have used any other 2D graphics programming language before, then you will familiar with the standard Cartesian coordinate system with the (0,0) at the top left corner, everything count from top left. For example, if you want to move your rectangle to right, you will have to increase your x-axis value; if you want to moving down, you will have to increase your y-axis value.

Simple Graphic

The canvas is initially blank and to display something, you will need the help of JavaScript to draw it for you. The canvas element itself has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. In this tutorial, we will focus on the 2D rendering context.

var myCanvas = document.getElementById(“myCanvas”);
var ctx = myCanvas.getContext(‘2d’);

Ok, let’s draw a rectangle on the empty canvas:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
      <script type=”text/javascript”>
         function drawShape() {
         var myCanvas = document.getElementById(“myCanvas”);
         var ctx = myCanvas.getContext(“2d”);
         ctx.fillRect(20, 20, 100, 100);
         }
      </script>
   </head>
   <body onload=”drawShape()”>
      <canvas id=”myCanvas” width=”300″ height=”300″>
         <!– Insert fallback content here –>
         Sorry, your browser doesn’t support canvas technology
      </canvas>
   </body>
</html>

Save your document and preview it on the supported browser and you will see a black rectangle shape:

We call a function ‘drawShape‘ when the document is on load and draw a rectangle on the empty canvas element by using the ‘fillRect‘ function. There are 4 compulsory parameters for the ‘fillRect‘ function which is upper-left corner (x, y) and its width and height.

ctx.fillRect(x, y, width, height);

Simple enough to understand right? Let’s move on to customize the rectangle that we have just created.

More Advanced

Besides, the ‘fillRect‘ function, there are 2 more functions that allow you to customize your rectangle, which is ‘strokeRect‘ and ‘clearRect‘.

The ‘strokeRect‘ function is to draw outlines for the rectangle. Let’s implement this function into our code as shown below.

ctx.strokeRect(10,10,120,120)

Save and preview it, you should get something like this:

Ok, let’s add the ‘clearRect‘ into our code. ‘clearRect‘ is a function that use to clears the specified area and makes it fully transparent. Let’s add this into the code:

ctx.clearRect(45,45,50,50);

Save and preview it again, You will see that the center of the rectangle become transparent. Note: ‘strokeRect‘ and ‘clearRect‘ have the same parameters as ‘fillRect‘, which is upper-left corner (x, y) and its width and height.

Final Code

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
      <script type=”text/javascript”>
         function drawShape() {
         var myCanvas = document.getElementById(“myCanvas”);
         var ctx = myCanvas.getContext(“2d”);
         ctx.fillRect(20, 20, 100, 100);
         ctx.strokeRect(10,10,120,120);
         ctx.clearRect(45,45,50,50);
         }
      </script>
   </head>
   <body onload=”drawShape()”>
      <canvas id=”myCanvas” width=”300″ height=”300″>
         <!– Insert fallback content here –>
         Sorry, your browser doesn’t support canvas technology
      </canvas>
   </body>
</html>

In next tutorial, we will describe more other functions that can be used for canvas element. Stay tune!