Introduction

last modified July 17, 2023

This part of the HTML5 canvas tutorial is an introduction to HTML5 canvas programming in JavaScript language.

About

This is HTML5 canvas tutorial. It is aimed at beginners. This tutorial will teach you the basics of graphics programming in JavaScript for the HTML5 canvas element. The images used in this tutorial can be downloaded here.

The HTML5 canvas element provides tools to work with both vector and raster graphics.

HTML5 canvas

HTML5 canvas element provides a resolution-dependent bitmap area, which can be used for rendering graphs, game graphics, art, or other visual images on the fly. In simple terms, canvas is a new element in HTML5, which allows you to draw graphics using JavaScript. Canvas brings animations to web pages without the need of plugins like Flash, Silverlight, or Java.

HTML5 canvas was originally introduced by Apple in 2004 for use in Mac OS X WebKit to power dashboard applications and their Safari web browser. Since then it has been adopted by Mozilla and Opera. Later, W3C has adopted it in the HTML5 specification. Today, it is supported by all modern web browsers.

The canvas context

The canvas context is an object which exposes the Canvas API to perform the drawings. It provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface. The context is retrieved with the getContext method. The argument of the method specifies the desired API: either "2d" for two-dimensional graphics, or "webgl" for two-dimensional and three-dimensional graphics. It returns null if the given context Id is not supported.

Drawing a rectangle

We create a simple example of graphics rendering in HTML5 canvas.

rectangle.html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas rectangle</title>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
    
        ctx.fillStyle = "cadetblue";
        ctx.fillRect(0, 0, 100, 100);
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="250" height="150">
    </canvas>
</body>
</html>

The code example draws a cadetblue rectangle in the upper-left corner of a webpage.

<!DOCTYPE html>

A document type declaration, or DOCTYPE, is an instruction to the web browser about the nature of the HTML document. This particular declaration tells the browser that the webpage is a HTML5 document. The canvas element was first introduced in HTML5 standard.

<script>
    function draw() {
...
    }    
</script>

The drawing is performed in the custom draw function. It is called when the body of the HTML document is loaded.

var canvas = document.getElementById('myCanvas');

With the getElementById method, we get the reference to the canvas element.

var ctx = canvas.getContext('2d');

A rendering context is retrieved with the getContext method.

ctx.fillStyle = "cadetblue";

The context's fillStyle property specifies the colour or style to use inside shapes. The style is then used in the subsequent drawing operations.

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

We paint a rectangle in specified colour. The dimensions of the rectangle are given in the method's parameters. The first two parameters are x and y coordinates. The next two parameters are the width and height of the rectangle.

<body onload="draw();">

The onload property defines an event handler for the load event of a window. The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading. In our case, we call the draw method, which performs the drawing on the canvas.

<canvas id="myCanvas" width="250" height="150">
</canvas>

The canvas element is created with the <canvas> and </canvas> tags. The width and height attributes set the size of the canvas element within the page. The id attribute identifies the element in the DOM hierarchy.

Shadow

HTML5 canvas contains properties to create a shadow.

shadow.html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas shadow</title>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur    = 4;
        ctx.shadowColor   = "#888";  
        
        ctx.fillStyle = "#000000";
        ctx.fillRect(10, 10, 80, 80);
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="250" height="150">
    </canvas>
</body>
</html>

In the example, we create a shadow beneath a rectangle.

ctx.shadowOffsetX = 5;

The shadowOffsetX property specifies the distance that the shadow will be offset in the horizontal direction.

ctx.shadowOffsetY = 5;

The shadowOffsetY property specifies the distance that the shadow will be offset in the vertical direction.

ctx.shadowBlur    = 4;

The shadowBlur property specifies the level of the blurring effect.

ctx.shadowColor   = "#888";

The shadowColor property specifies the colour of the shadow.

Reference

The following resources were used to create this tutorial:

Canvas element article on Wikipedia.
developer.mozilla.org/en-US/docs/Web/API/Canvas_API

This part of the HTML5 canvas tutorial was an introduction to JavaScript programming for HTML5 canvas.

Ebooks