Applications, games, tools and tutorials for the HTML5 canvas element
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.
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.
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?
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...
Controls
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!
As canvas gets more popular, we are beginning to see it being used for more diverse applications and tools. Take ChemDoodle, for example, an open source chemistry and chem-informatics toolkit where canvas is being used to solve common chemistry related tasks, displaying the molecules in a variety of different ways.
There are 6 different components to ChemDoodle, each of which use canvas to display the end graphics. Some also allow the user to interact through mouse and keyboard gestures.
ChemDoodle is incredibly comprehensive
Kevin Theisen, the man behind ChemDoodle claims that ChemDoodle “will revolutionize how chemical data is handled on the web, by replacing images and applets with powerful and secure native browser components.”
It certainly seems comprehensive!
Screen Shoot Me is a handy little tool designed for an age of the popular tiny URL and the need to instantly share media.
Screen Shoot Me, by Lucho Yankov, provides a quick and easy way for users to paste an image in their clipboard and make it available on the web in seconds using a shortened URL. If your copied image needs some cropping, that’s not a problem as you can modify your image before you save. Here’s on I made earlier.
The service uses the HTML 5 canvas element to show the image contents on the screen; and allow users to make edits before saving the final image to a shortened URL.
Is ScreenShoot the next big thing?
There are a couple of caveats to the service – the major one being that you need to have JRE installed and approve the applet so the application can access your clipboard information. The service also doesn’t run on Mac OS X.
Screen Shoot Me is only currently compatible with Firefox 3.5; although your saved images can be used on any browser.
As a couple of suggestions for improvements for Lucho, it would be nice to be able to include annotated text on the image; and also it would be more user friendly if the user interface was made to be pretty.
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
Submit your demo, and if we like it we'll feature it on Canvas Demos!
