Applications, games, tools and tutorials for the HTML5 canvas element
Want to get started with Mr. doob’s 3D library Three.js? Paul Lewis has created this great tutorial which will help you do just that.
In this tutorial, Paul covers the basics of three.js including setting a scene; making a mesh and adding materials and lights. If you want to get started with three.js, now’s your chance!
http://aerotwist.com/lab/creating-particles-with-three-js/
Export artwork and animation from Adobe Illustrator directly to Canvas.
What happens when you combine the Digg API with the canvas element? You get a game called Digg Attack, that’s what!
Attack the Diggs!
Using the mouse to move and aim your heroes; and the control key to fire, your task to shoot down Digg stories as they happen. The more Diggs the story has, the bigger and stronger the enemy it becomes!
It doesn’t matter how many versions of Windows are released, some things stay the same. Take the functionality of the packaged paint program, for example. With the technology of Paint firmly fifteen years in the past, Christopher Clay has created a clone of the app using the canvas HTML element.
Windows Paint in a canvas
Sadly, Christopher has abandoned this project before all the functionality was completed, but maybe there’s hope someone else will pickup where he left off?
For those not in the know, a APNG is a new breed of animated image combining the benefits of PNG images by supporting 24-bit images and 8-bit transparency and the animation abilities of the GIF. The problem is that most browsers don’t support APNG at the moment, so Elijah Grey has written a script which detects if a browser supports the format.
A simple script that utilizes the HTML 5 canvas API in only 9 functional lines of JavaScript to detect if a browser supports APNG images. It can be useful for deciding when to serve a client browser APNG images instead of GIF images. This will set the variable, apng_supported to true if the browser supports APNG.
View the APNG JavaScript tool, or see it in action to find out whether your browser supports APNG!
We show a lot of demos on the Canvas Demos website which whilst being very cool don’t have much real world use. Apple have found one such real world use for the canvas element, on the pages of the new Apple iPod Shuffle to demonstrate the functionality of the new uber cool voiceover feature.
Apple iPod Shuffle VoiceOver
The page uses Apple’s QuickTime object, which communicates with some JavaScript to draw the animation using the canvas element. Why have Apple used this method? Most likely, it’s due to their love of Quicktime and the lack of Flash support on the iPhone. Regardless, it’s good to see a canvas example out in the wild!
Over at Mozilla Labs, a new web-based code editor called Bespin has been released as BETA built using the canvas element.
Bespin supports syntax highlighting for HTML, CSS and JavaScript; line numbers; large file sizes and increased control of your documents using a command line control.
Who here remembers Spirographs from their younger days? Ben Joffe does, and has created a fantastic spirograph program with the canvas element!
Pretty patterns!
The spirograph lets you configure all kinds of parameters such as the size of the static circle, the mobile circle and the colour of thickness of your brush; and you can save them out as a PNG when you’re done!
View the Spirograph demo and be taken back to a more innocent time!
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!
