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.
Think is a free mind mapping web application which has been implemented using the canvas element, Django and Google App Engine. Created by Ashley Sands, Think allows users can create and view their own mind maps.
Some thoughts about canvas
Think is simple to use. Clicking a node allows you to either spawn another connected node, edit the node text, delete a node or change it’s connections.
Ashley adds that “Think is still in its infancy, so there are still many features to come.”
Yanek1988 has created an HTML5 canvas line animation called Beautiful Math which shows creates a geometric figure step by step.
Ohh, pretty...
Comments from the Author (translated):
Many times I browsed on different sites of the cool drawings. Unfortunately I was not blessed with a talent for drawing and I could not create anything like the same. As I reviewed materials related to the element <canvas> – new HTML5 tag, I saw a cool drawings created using straight lines. I thought it would be nice to do something with math.
Oil pixels float on top of water pixels, sand pixels sink. Fire pixels burn better on oil pixels, and will evaporate water pixels. No – I haven’t gone mad, I’m describing Yarik’s Element Dots canvas demo where different coloured pixels represent different elements and you can set up different scenarios to see how they get along.
Someone call the Fire Brigade
When you first load Element Dots you are presented with three taps, representing pouring water, sand and oil. Draw on the canvas with the solid brush (which appears to represent grass) to contain your elements. Then select an element from the right hand menu to add to the mix.
Nicholas Erho has created this 2D dynamic water effect using the canvas element. Water splashes can be made simply by clicking the water surface. You can create multiple splashes by clicking and dragging the mouse.
Rippley
The demo allows users to change damping, shading and refraction as well as the size and look of the background.
Kevin Pickell is the man responsible for this retro game offering built with the canvas element. In Defender, players must defeat waves of invading aliens protecting the astronauts on the surface below.
Defend the planet's surface
Comments from the Author:
This is a version of Defender that I wrote last year for the STM-32 Primer 2, I just converted it to Javascript
Controls are cursor keys to move, A to fire and S to frazzle everything on the screen.
Cloudkick Viz uses the canvas element to display cloud server monitoring information in real time. The graph plots servers in real-time in a 3D space according to performance metrics like CPU and memory usage, and ping latency. Each plotted points size represents the relative power of the server and will blink when monitoring data is updated. If something critical happens, it will turn red and pulsate. Hovering over a server will show you its name and a ghost trail based on performance history, and clicking will yield detailed monitoring data.
Getting a kick out of cloud visualisation
Comments from the Author:
Cloudkick Viz turns your browser into an interactive NOC, automatically populated with the servers you’ve connected to Cloudkick. It’s built on HTML5, canvas, and JavaScript – specifically processing.js – and it’s the first cloud monitoring system in the world that you can watch in real-time as it checks your servers.
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!
