HTML 5 will usher in a whole host of new possibilities for developing without the need for plugins such as Adobe's Flash Player.
Thoughts on plugins like Flash Player
Whether or not Flash is on the way out remains to be seen. There are compelling arguments for the elimination of Flash from a web developers vocabulary, but Flash is also a very exciting and rich medium. One complaint about Flash focuses on the processor usage in an era where mobile web technologies and battery life are ever critical. Search engines still do not accurately crawl and analyze Flash content properly. And, Apple has taken a stand against Flash with it's extremely popular mobile products. Don't get us wrong.... Flash has a lot of positive features also, and we are not fully in support of the downfall of Flash either.
HTML 5 Canvas Element
In short, the <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Apple was the first to use the element for their Mac OS X WebKit which powered their Dashboard widgets. Not all web developers have been thrilled with Apple's push for the canvas element as opposed to the SVG standard for instance. Canvas is a drawable region that is defined within HTML code. The HTML 5 canvas element is very exciting because it opens up possibilities for functionality that was once the completely dominated by Flash in the context of web applications. The <canvas> element will make such interactions easier and cheaper to program into web applications. Although, the new element <canvas> is defined in HTML 5, you will still need to rely on a programatic language to create actions--Javascript is a very popular approach to building such functionality.
<canvas> has two attributes: width and height. Height and width are both optional properties. (Note: If you do not specify a height or a width for <canvas>, then your canvas will be 300 pixels wide and 150 pixels high. If the rendering of your canvas element seems distorted, then you will need to specify a height and width.
Here is a code snippet that uses the canvas element:
<canvas id="example" width="500" height="500">
This plain text will displayed if your web browser does not support HTML5 Canvas.
</canvas>
The <canvas> element has a DOM method called getContext, and the getContext() takes one parameter. Below is a sample definition:
1. var canvas = document.getElementById('blahblah');
2. var ctx = canvas.getContext('2d');
You can use the onload attribute in the <body> tag to call to a function that you create using javascript to give definition to canvas (by ID).
More info on HTML 5