Sunday, October 30, 2011

HTML5 <canvas> tag: markup, support and non-support

HTML5 includes the canvas element for display of graphics. Canvas markup is implemented by inserting a <canvas> tag in the desired spot of your HTML document and associating JavaScript code that specifies what to draw and paint [1].
The latest versions of browsers such as Firefox, Opera, Safari, Google Chrome, Konqueror and Internet Explorer support canvas markup.     

Markup should contain alternative content for users of older browser versions or canvas-incompatible browsers; as illustrated with the following syntax:

In those cases where the drawing is going to fail, the animated note of file canvsup_600x490.jpg (shown to the right) would display. If the browser is not image-compatible either, a plain text string with that note would appear.

An image element expects an external source to be uploaded and displayed, while a canvas element uses page-internal instructions (or supplementing js files) to create an image within the capabilities of the client browser.

Canvas-based two-dimensional drawing, for example, is implemented by fetching the canvas element via methods of the JavaScript document object:

var canvas = document.getElementById("my-canvas");
var artist = canvas.getContext("2d");

Drawing instructions are then implemented with methods of the artist object (or whatever  variable name you are coming up with for the context object). Tutorials and examples that explain and show how to use these methods are available online; for example see www.w3schools, basics/opera, developer/mozilla, wikipedia, updates to standard.

[1] Thomas A. Powell: HTML & CSS: The Complete Reference. Fifth Edition. McGraw Hill, New York, 2010.; pages 82 to 101.

1 comment:

  1. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    html5 player| html5 video player