As canvas comes closer and closer to replicating the features of Flash; canvas-based cartoons are beginning to appear. Starting with this one, featuring two characters called Tomte and Goat; who explain how you can make your own cartoons in canvas!
A taste of things to come?
The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!
View the HTML5 Canvas Animation cartoon
Fabien discusses his aim when building the library:
The main goal of this implementation is to respect the specs given by the W3C and WHATWG for the HTML5 <canvas> tag.
Canvas Text doesn’t change the already implemented functions in Firefox 3.5+, Safari 4 and Chrome 2+ as these are already to spec and doesn’t require any other library except ExCanvas for Internet Explorer.
Sweet, sweet canvas text
Provided with the tool on the Canvas Text codebase are some examples of it working using positioning, animation, transformations and to show performance.
Check out the Canvas Text tool
The name Many Lines describes this canvas demo perfectly – this application will draw many lines on and around your cursor. The application, developed by Eric Ishii Eckhardt, uses a particle system to draw the lines following your mouse around the screen.
Good luck trying to make anything as pretty as this!
This demo works well in Chrome, Firefox 3.5 and Opera 10.
View the Many Lines demo
Mark Pilgrim is currently writing a book on the joys of HTML 5 and how developers can “dive in” to the new features.
One of the first chapters to surface in Mark’s draft is all about canvas; explaining all about our favourite element and how to start using it. Everything is explained simply and therefore this tutorial is perfect for beginners.
Drawing with canvas requires concentration
The tutorial is a work in progress, so check back to see the whole chapter take shape. Dive in to HTML 5 will eventually be published by O’Reilly, but it will also remain online for free.
View the canvas tutorial
The Matrix was a great film, wasn’t it? Its sequels, not so much.
Mike Hatfield has created a simple proof-of-concept Matrix rain effect rendered in canvas. The effect uses images borrowed from Thomas John’s original Matrix Fall screensaver and a motion blur generated in code by not completely clearing the frame on each cycle.
Take the red pill, try the demo
Firefox 3.5 seems to be the best browser to use for the effect. Safari and Chrome seem to struggle having I difficulty running the demo at an acceptable speed. Mike would love to hear feedback on how he can get the demo running more efficently if anyone has any suggestions?
Check out the demo
Combining HTML 5 elements canvas, audio and video, JS Wars by Jonas Wagner is a classic shoot ‘em up showing how built in browser technology is getting closer and closer to replicating what Flash can do.
The mission in JS Wars is simple: Find and destroy Dr. Skull! The enemies consist of flying eyes which will shoot at you at any given opportunity; and mines which start harmless but as you progress begin to glow red and home in on your position. There are a couple of power ups to make your experience a slightly more fair one – missiles come in packages of 5s, while nukes will blow up everything on the screen (except you).
Either I'm not very good, or Dr Skull doesn't exist...
Click on the game to activate the keys. Navigate the menus with the arrow keys and enter or space.
You can control your ship using the arrow keys. Press space to fire your primary weapon or control to fire a power up.
Works best in Firefox 3.5 or Chrome.
Play JS Wars – a score of 2,760 to beat, people!