Week 6: HTML 5 Canvasing

In class this week we were introduced to a new tag in HTML 5 the canvas tag.

What is the HTML 5 Canvas all about?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

The <canvas> element is used to draw graphics, on the fly, on a web page.The example at the left shows a red rectangle, a gradient rectangle, a multicolored rectangle, and some multicolored text that is drawn onto the canvas.

How to create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.

The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Browser Support 

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Note: For more information on HTML Canvasing click here