Applications, games, tools and tutorials for the HTML5 canvas element
Paul Hamill has created this lemonade-esque demo with the canvas element. Just like lemonade, the blobs float from bottom to top. Click the canvas area to add more blobs, and change the colour of the blobs using the palette below.
Fizzilicious!
Sandy is a 3D engine that prodominently works in Flash, but for a recent release have starting supporting haXe, a multiplatform language. As a result with support from some additional libraries, it is now possible to get Sandy 3D working with JavaScript and canvas.
Matthew Casperson has created some handy tutorials demonstrating how to take this approach to 3D, along with some impressive demos.
View the Sandy haXe demos, and also the tutorials.
For more information on Sandy, visit their website at www.flashsandy.org
Scott Schiller, author of the excellent Flash/JavaScript plugin SoundManager2, has created some funky 360 MP3 Player User Interface demos using canvas.
Scott says:
This is a version of the “360-degree player”, a demo packaged with SoundManager 2 (JS+Flash sound API) that uses Canvas to draw pretty waveform and spectrum EQ graphs around a circular UI that shows load and play progress.
The 360 UI works on the basis of decorating plain old HTML links to MP3 files, allowing play, seek, showing progress etc. using the canvas element.
Check out the 360 MP3 Player, and if you aren’t already familiar with SoundManager2, check out it’s official site.
Kevin Geer has submitted this beautiful demo of a living, breathing dragon which flaps it’s wings in to a heart shape. The dragon animation is composed of recursive functions., instead of loops.
This binary clock is a simple but clever demo of a binary clock using canvas.
Hope you know binary...
Not sure how it works? The circles each represent a binary count – when they are filled they represent 1 and when they are empty they represent 0. From the left to right and then downwards, the values represent 1, 2, 4, 8, 16, 32. To get the number 11, the circles 1, 2 and 8 would be filled (1 + 2 + 8 = 11).
Turbomilk, specialists in creating icons, have developed Iconza – a canvas based Mootools application. Iconza provides a collection of free icons that can be dynamically coloured and resized to your own requirements.
Choose a predefined colour, or hit the colour box to make your own
Check out Iconza Iconza
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!
