HTML5 Canvas Overview

This text provides a overview of the HTML5 Canvas basic usage. The overview is split into a parts:

1. Declaring an HTML5 canvas element.
2. Drawing graphics on the canvas element.

Declaring a Canvas Element

First, let's see how to declare a canvas element in an HTML page:

<canvas id= "Ex1" width= "the height=" style= "border:1px           solid #cccccc;" >    HTML5 Canvas not supported</canvas>

The code above declares a single canvas element with width set to $, height set to, and style set to a 1 pixel border With color #cccccc .

The text inside canvas the element is ignored, if the browser supports the HTML5 canvas element. If the HTML5 canvas element is not supported, the text would probably be displayed as ordinary text by the browser.

You should put the canvas HTML code in your page at the location where you want the canvas to be visible. Just like any other HTML element (e.g. a div element).

Drawing Graphics on a Canvas Element

Graphics drawn on a HTML5 canvas is drawn in immediate mode. Immediate mode means, that as soon as you had drawn a shape on the canvas, the canvas no longer knows anything about that Shape. The shape is visible and you are cannot manipulate that shape individually. It's like a real canvas for a painting. Once painted, all of you has left is color pigments/pixels.

This is contrary to SVG, where can manipulate the shapes individually, and has the whole diagram redrawn. In HTML5 you'll have to redraw everything yourself, if you want to change the drawn figure.

Drawing graphics on a HTML5 canvas element is the done using JavaScript, following these steps:

1. The Wait for the page is fully loaded.
2. Obtain a reference to the canvas element.
3. Obtain a 2D context from the canvas element.
4. Draw graphics using the draw functions of 2D context.

Here's a simple code example that shows the above steps:

<script>    //1. Wait for the page is fully loaded.    Window.onload = function () {        drawexamples ();    }    function Drawexamples () {            //2. Obtain a reference to the canvas element.        var canvas  = document.getElementById ("Ex1");        3. Obtain a 2D context from the canvas element.        var context = Canvas.getcontext ("2d");        4. Draw Graphics.        Context.fillstyle = "#ff0000";        Context.fillrect (10,10, 100,100);    } </script>

First, an event listener function was attached to the window. This event listener function was executed when the page was loaded. This function calls another function I has defined, called drawExamples() .

Second, the drawExamples() function obtains a reference to the canvas element using document.getElementById() function, passing the the id canvas element, as defined in the declaration of the canvas element.

Third, the drawExamples() function obtains a reference to a 2D context from the canvas element, by calling on the canvas.getContext("2d") canvas eleme NT obtained earlier.

Fourth, the drawExamples() function calls various drawing functions on the 2D context object, which results in graphics being drawn On the canvas.

Here's how the code looks when executed:

HTML5 Canvas Overview