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!
Tweet, Share or Comment on this page if you found this tutorial or resource useful!
Thanks for sharing a diverse collection of html 5 Canvas examples. I have seen quite a few websites recently making use of this new HTML 5 element something which I hope to get round learning when it becomes more mainstream. Many of the examples listed from http://www.canvasdemos.com/ a site which I will be bookmarking for future reference, feature powerful animation effects which could add another aspect of interactivity to a site when used effectively.
awesome…thanks a lot for the great lists
This is a great site. Content was great.
Simply Awesome… Thanks so much for sharing these beautiful projects, i’m already getting my hands dirty on the canvas element!
Thanks for the well researched list, some great stuff!
A site that seems pretty popular at the moment is http://www.loxiastudio.com/en
It perhaps geared a little more for beginners than experiences webdesigners but you cant argue with.
It’s an on-line tool that lets you choose from around 40 different animations then simply cope and paste a small line of code (simple iFrame from what I can tell) into your site.
All done on-line and they even host the animation.
certainly worth a look
Very nice demos..
here is another of 3ds models animating in real time.
http://www.html5guru.co.uk
Really great animations! Also worth a try: http://www.a5-animator.com
Wow. Definitely a bookmark-able reference. Thanks!
This is really a great collection of HTML5 Canvas Animation – I love it. Thanks for sharing.
I seriously love your site.. Pleasant colors & theme. Did you build this site yourself?
Please reply back as I’m hoping to create my own personal site and would love to know where you got this from or just what the theme is called. Cheers!
I need to to thank you for this good read!! I definitely loved every little bit
of it. I have you book-marked to look at new stuff you post…