HTML5 Canvas: The Basics

Canvas is a tag in HTML5 which is used to draw graphics in the web page with the help of some script. Canvas is really powerful and with this tag, you can draw complex shapes and animations on fly. The most widely used script for Canvas is JavaScript. To start with HTML5 canvas, you must have at least the basic knowledge of HTML and JavaScript.

To give you an idea, you can create simple games, animations, word arts, photo compositions, etc. just with JavaScript.

This is the first part of the series of Tutorial on HTML5 Canvas. Here, we will understand the basics and learn to create a rectangle. As we progress, we will learn the following in subsequent chapters.

  1. How to draw basic shapes
  2. Canvas Paths
  3. Adding Text in Canvas
  4. How to do photo compositions
  5. Apply styles and colors
  6. Basic animations

Browser Support

As you know the Canvas element has been introduced with HTML5 and is fairly new. The older browsers like Internet Explorer earlier than version 9, does not support it. It is well supported by Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9. So, ensure that you use the supporting browsers for learning HTML5 canvas.

How to use Canvas Element

Canvas element is basically the container of graphic elements. To include the canvas in HTML, you just need to define the height and width.

<canvas id="canvas-tutorial" width="300" height="200"></canvas>

If you see the markup, it will look pretty familiar. It is not different from other HTML elements. And just like <img> element, you can define the border, background, margin, etc. By default, the canvas element is fully transparent with no border. You may even escape width and height attributes, in that case, the default value for the width and height will be 300px and 150px respectively. However, it is recommended that you define the width and height; otherwise the graphics may appear distorted in some browsers.

Similar to any HTML element, you can define the properties of canvas in CSS with its id attribute. It is a good practice to always supply an id attribute with every canvas element. It helps to identify the canvas in the scripts if you are using more than one canvas in a web page.

For older browsers, which do not support HTML5 canvas, we can provide some content as a fall-gap arrangement. To do that, you can write some text or put some image inside the canvas element like this:

<canvas id="canvas-tutorial" width="300" height="200">
  Sorry, your browser does not support HTML5 canvas.
</canvas>

OR

<canvas id="canvas-tutorial" width="300" height="200">
  <img src="images/no-canvas.jpg" alt="No canvas support" />
</canvas>

However, you are not limited by only text or images. You can put any html element inside canvas tag to provide your content. With JavaScript also, which I will explain later on, we can easily determine, if the browser supports canvas or not.

The browsers which support canvas element will ignore the content inside canvas tag and render the graphics instead.

Also note here that use of end tag i.e. </canvas> is required. You can’t do away with tag like this which you can do with <img> tag:

<canvas id="canvas-tutorial" width="300" height="200" />

Creating a Canvas

Let’s now create our first graphics with canvas. As I have already mentioned, canvas is really powerful and we can draw complex shapes both in 2D and 3D. Here, we will be drawing a simple rectangle in 2D. We need to declare it as rendering context in the beginning of the script with getContext() method.

To start with, we need to access the canvas element with getElementById method followed by type of context.

var canvas = document.getElementById('canvas-tutorial');
var ctx = canvas.getContext('2d');

With this, we have now defined and declared our canvas. To draw a rectangle, we will use fillStyle property to define the fill color and fillRect property to draw a rectangle.

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

You can put the JavaScript code and the CSS in external files, but for the ease of understanding I am putting everything in the HTML file itself. The complete HTML code to draw rectangle inside the canvas element is here:

<html>
<head>
<script type="application/javascript">
function drawRectangle() {
var canvas = document.getElementById('canvas-tutorial');
var ctx = canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>
<style type="text/css">
    #canvas-tutorial
    {
     Border: 5px solid #FF0000;
    }
</style>
</head>
<body onload="drawRectangle();">
<canvas id="canvas-tutorial" width="300" height="200">
"Sorry, your browser does not support canvas!"
</canvas>
</body>
</html>

So, how does it look like? Really Cool, isn’t it?

So, you have just created your first graphics with HTML5. As you will notice in the above example, we are defining drawRectangle function in JavaScript and calling this function with body onload attribute. Once the page is loaded, the function is called and the graphic is rendered. You can call this function with any other triggers like onClick, setInterval or setTimeout, etc.

Checking for Browser Support

We can check the compatibility of browser for the HTML5 canvas element through the JavaScript itself. It is done by testing the getContext() method like following.

var canvas = document.getElementById('canvas-tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code follows here
} else {
// canvas-unsupported code here
}

It is a good practice to always check browser compatibility with this method.

Canvas Coordinate System

Let’s have a close look on the JavaScript Code which is creating the rectangle.

ctx.fillRect(0,0,150,75);

The digits inside the brackets represent the coordinates of the rectangle – Xstart, Ystart, Width and Height. The canvas coordinates for 2D context starts at the top-left corner. Thus, the origin (0, 0) for canvas coordinates is at the top-left corner. As you move in right direction, the X value increases. Similarly, while we move downwards from origin, Y value increases.

In our example, the rectangle starts from (0, 0) and extends to 150 pixels in X direction (width) and 75 pixels in Y direction (height). You know now that 1 unit in canvas coordinate system is equal to 1 pixel.

Can you tell why there is a red border around the canvas? Yes, this is because we defined the border for the canvas in CSS.

Great! You have now learnt the basics of HTML5 canvas element and drawn a basic shape.

In the next articles, we will continue with shapes and learn to create rectangle of various types, circles, lines, arcs and curves.

Next >> HTML5 Canvas: Draw Shapes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>