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.
Back in March 2009, we featured a 3D Chess game by Jacob Seidelin whereby two human players could play a game of chess on a 3D board. Since then, Stefano Gioffré has been busy improving the original base game with a 2D version (not canvas) and a computer controlled opponent.
2D/3D Chess
Can you beat the computer?
Inspired by nature – FlowerPower is a simple yet beautiful drawing tool which uses blooms as brushes, created by Mhepekka.
Canvas Demos' Flower Power
In this demo, you can adjust the size, the number of petals; adjust the bezier stretch factor and select from several pallettes of different coloured flowers.
Jason Brown has created a clone of Atari’s Lunar Lander called JSLander. As the name suggests, the game is developed in JavaScript using the canvas element for rendering the game display, including the text.
A successful landing?
Press Space to start the game; then A to increase the thrust; Z to decrease the thrust and the left and right cursor keys to turn left and right.
Comments from the Author:
To land without crashing your velocity cannot be faster than 6, for a perfect landing your velocity cannot be over 3. Your angle must be between 5 and 0. Once you run out of fuel, your landing days are over.
Robin Vernau’s Charact-o-matic has a distinctly retro futuristic about it.
Retro futuristic 3D text
Type the text you wish to display in to box on the bottom left, and then use the controls scattered around the display area to change the 3D effect.
The creators of deviantART have embraced HTML5 within their new drawing application which uses the canvas element and allows their users to produce artwork in their browser.
"The future is coming" by nuevemonos using deviantArt Muro
Comments from the Authors:
From start to finish, deviantART Muro allows users to create complete works of art in ways never before realized by digital drawing programs. deviantART Muro already boosts standard and interactive brushes, full-blown layer capabilities, and the ability to upload directly to your deviantART account, but we’ve also left room for expansion. You can expect to see many features and functions added in the coming weeks and months.
Joshua Koo has created this canvas implementation of the Tenori-On made by Yamaha. The Tenori-On is a hand-held interface with a surface of 256 LED buttons that glow as you access different sounds and texturesover an infinitely repeating sequence of notes. Click or Drag to play and create music with shapes, lights, smokes and colors.
Beautiful Music
Comments from the Author:
I use the the Sion Library for the audio, creating a JS to AS bridge to generate sounds. Howeveer, with the still-in-progress Mozilla Audio Data API, one can easily modify this program to run fully in javascript soon.
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!
