Check out some awesome HTML5 animations, photo galleries, image effects, 3D rotations & effects, background animations, audio and video applications and more that are possible using the HTML5 canvas element.
Overview
The canvas element is a new HTML feature and is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is an easy and powerful way to draw graphics.
Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics on the fly. Some anticipated uses of Canvas include building graphs, animations, games, and image composition.
Canvas was originally introduced by Apple for their Dashboard widgets, but it has now been adopted in HTML 5. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
Canvas allows one to draw directly in the web browser without the use of plugins like Flash or Java. With a simple API, Canvas can effectively build animation in web applications for all devices, not just desktops.
HTML5 Canvas Experiments & Applications
Animations
water Ripple effect using HTML5 canvas
HTML5 Canvas – “Electronic Business Card” experiment
Drawing/Sketching Applications
Animated Backgrounds
Html5 Canvas Star Space Background animation:Turn – dark blue
Audion & Video
3d Rotation
Cool 3D lighting effects – Normal Mapped Photos
Google Images Gift Box – CSS 3D example
Photo Galleries & Image Effects
HTML5 Canvas App for Online Image Enhancements
Premium Html5 Canvas
Interactive 3D CGGallery – HTML5
HTML5 Image Transitions Jquery Plugin
Neon Text Effects jQuery Plugin
Shiner – HTML5 Canvas Glow Effects jQuery Plugin
Gravity Gallery – HTML5 jQuery Plugin
Hope you enjoyed this post and learnt something new & interesting! Tell us what you think!
