Using the new Canvas element in HTML5 can be a lot of fun, but you need to know a little about JavaScript as well as HTML in order to add any real functionality. With this new element, you may create large scale graphical applications or small scale graphics for simple web sites, and everything imaginable in-between. In this tutorial, you will get an introduction to the capabilities of the HTML5 Canvas element.

One amazing example of how versatile this tool is may be seen at:
Crafty Mind

While we won’t be creating anything quite as impressive here, this short tutorial will implement a basic use of the element, and hopefully illustrate what’s involved in the process.

Setup

If you have not already done so, open Visual Studio and start a new web project. If you do not wish to use visual studio, you may any developing environment or even a text editor like notepad.

Step 1.

The first thing you will need is the basic HTML markup to make the index.html. This markup will allow us to move forward with the project. Set up your index.html page or copy and paste the following code into your file:

Step 2.

In the body portion of your page. You will need to place the HTML5 canvas tag and set its attributes up. We provide this code for you in the code box below.
Take note that we added an “onload” attribute to the body element to call the draw function from our JavaScript code.

So the ID is set to canvas, width and height set to 100 and the border is a solid black 1px line. Nothing goes in between the canvas tags. However, we need to add more in order to get the results intended.

Step 3.

We will be adding the JavaScript, which is responsible for filling up the canvas with items. The script can be within the head portion of the page, in script tags. The script type will be of type “application/javascript”.

The javascript is as follows:

In the code we implement a draw function, who takes no parameters however it contains a variable, var canvas. Canvas is set to get an element from the document by the id, by calling the document.getElementById() method and passing “canvas” as the parameter. We then implement an if statement that calls instantiates another variable, ctx, to canvas.getContext() and sets the parameter to a string, “2d”, in other words, two dimensional.

Ctx has two properties, fillStyle and fillRect initialized to colors and pixels. Colors being blue and green. Notice the fillStyle command for the second rectangle uses the rgba style rather than rgb. This means that it has an Alpha Channel along with the Red Green and Blue channels allowing it to appear partially opaque. We have set the Alpha to .5 or 50% opacity so that we can see through it.

When the code is ran, the following image is developed in the browser:

A Few Last Words…

There are various ways to apply today’s lesson, it just depends on your need for it. The canvas tags is just one of many new additions to HTML, we discuss the other features in future tutorials. Thank you for being a valued reader and join us next time for additional HTML tutorials.

Download Source Files