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.
Jean d’Arc has created this 3D texture mapping demo using the HTML5 canvas element. The demo features rotating 3D objects with spherical texture mapping and pixel shading.
Reflections
Use the list on the left to choose which object to display and the list on the right to choose what texture to apply.
Pete Chappell has created this canvas demo takes photos from Flickr (currently from a predefined set) and creates a kaleidoscope from them using the HTML5 canvas element.
Choose a photo and play with the effect
Comments from the Author:
I use a combination of drawImage and clip to render a 8 triangular portions of an image on a square canvas. Moving the mouse causes the masks (created by clip) to move over the original image thus creating the kaleidoscope effect.
Joe Huckaby has gone back to an 8-bit technique for his colour cycling canvas demo. Back in the days of 8-bit video games graphics cards could only render 256 colors at a time so colour cycling was often used to achieve interesting visual effects by cycling (shifting) the color palette. The technique was fast and took virtually no memory. Thus began the era of color cycling.
Joe has recreated this effect using canvas and some beautiful graphics by Mark J Ferrari. Mark cleverly used color cycling for environmental effects such as rain, snow, ocean waves and smoke.
Graphics by Mark Ferrari
Comments from the Author:
In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen.
We’ve featured a bunch of different drawing applications on Canvas Demos ranging from the simple to the outstanding. If you’ve wondered how you can learn to create your own drawing application, then William Malone is the man to help you out.
It's a duck!
William’s tutorial takes you step by step through the development of a simple web drawing application combining the HTML5 canvas element and JavaScript. There are progress demos, screenshots, code samples and clear instructions to help you on your way.
Take an impressive journey through our universe using the HTML5 canvas element thanks to Mr Doob. Starting with a big bang, watch as we journey through galaxies until we find our own habitable rock, the Earth.
It starts with a big bang
Comments from the Author:
Now that three.js was starting to get stable and also thanks to some sequencing code I had done some months ago I had no excuses to get working on it. So, from Friday midnight until Saturday afternoon, I managed to get this.
Your best option for viewing this demo is using Chrome on Windows. Enjoy!
Shaw Young has created this impressive retro update of Manic Miner called Manic Spaceman. The game was created for a competition with his friends over who could create the best Manic Miner update within 8 weeks. Shaw created his entry using canvas.
I always wanted you to go in to Space man
As with all the retro classics, the game chucks you in at the deep end of the difficulty scale. Use the cursors to move left and right and the space bar to jump!
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!
