HTML5 Canvas feature, add Graphics, Videos, Animations to your website
Though still in its infancy, HTML5 Canvas holds a lot of promise for displaying animations, videos and graphics in devices not supporting Flash.
Where Flash is supported, it is still deemed superior to HTML5 Canvas for complex animations according to some tests.
The HTML5 Canvas element
Using the Canvas element
Some of the drawing functions available are
- Drawing Tools: Rectangles, Arcs, paths and line drawing
- Effects: Fills and strokes, shadows, color gradients, text images, alpha transparency and compositing.
- Transformations: Scaling, rotation, translation, transformation matrix
- Inserting external images by URL
- Pixel based manipulations
- Retrieving a PNG representation of the current canvas as a data URI
These can be used to put together some great stuff.
Canvas element application
The HTML5 canvas element is used to create
- Graphs and Charts
- Videos and Photo galleries
- Special image effects
- Drawing applications
- User interface enhancements
Browser Support for HTML5 Canvas
HTML5 Canvas was first introduced by Apple for the Mac OS X Dashboard and later implemented in the Safari browser. All major browsers including Mozilla Firefox, Google Chrome and Opera have followed suit. Internet Explorer 8 does not provide support though Internet Explorer 9 will be fully supporting HTML5.
Future of HTML5 and the Canvas element
The HTML5 Canvas element is especially important for New age gadgets like IPads and IPhones which do not support Flash. With the increasing support for HTML5 across major websites and in Browsers, the Canvas element will only grow in importance. Next in the pipeline is a 3D Canvas for more complex displays.
Posted by Dharne & Co., a leading website design company based near Irvine, California.