HTML5 Canvas tag and JavaScript

Introduction: New to HTML5 is the CANVAS tag. This is a blank surface that allows you to add things like shapes, images, text, and perform animation. In fact, whole games have been written in JavaScript with the CANVAS tag. Let’s have a look at the basics. First, though, download our template file for the canvas section: The HTML 5 Canvas Template. This will save you from having to type it all out for this and the subsequent lessons.
Getting Started with the Canvas Tag
The HTML for the canvas tag is fairly simple. It’s just this:

You then add height and width attributes:

To get at the canvas with JavaScript, add an ID:

For browsers that don’t support the canvas tag, you can add some text between the two tags:

Your browser is like really old, dude – no canvas support!

Because the HTML5 canvas is a blank space, we’ll add a border round it:


Your browser is like really old, dude – no canvas support!

Let’s also add a button to the page. When the button is clicked a function can be called that draws to the canvas:

So all of the basic code you should have is this: