Making a Canvas with HTML 5

Canvas is an element from HTML 5 that allows you to create multimedia on a webpage, using a scripting language like JavaScript.

Invoking the CANVAS element

Here we will create a simple canvas element by invoking the code:

<canvas id="myfirstcanvas" width="400" height="400">
An optional message or fallback measure for browsers that don't support the canvas element can be inserted immediately before the closing canvas tag. It usually says something like "Your browser doesn't support HTML5, follow this link for an old fashioned and less cool option, while your friends with a good browser enjoy this fancy CANVAS element..."

</canvas>

Where's my Canvas?

The Canvas element is invisible until something is actually put into it, or until some styling is applied through CSS.

In order to show you the canvas, I'm going to give the canvas a blue background using the following styling information in the <head> of this document:

<style>

canvas { border: 10px inset blue; }

</style>

Here's what it looks like when it's rendered:

An optional message or fallback measure for browsers that don't support the canvas element can be inserted immediately before the closing canvas tag. It usually says something like "Your browser doesn't support HTML5, follow this link for an old fashioned and less cool option, while your friends with a good browser enjoy this fancy CANVAS element..."

And there you have a blank Canvas! Next we'll see how to actually draw on the Canvas with some simple JavaScript.

Next: Drawing on Canvas...

back to Session Index...