Applications, games, tools and tutorials for the HTML5 canvas element
Twitch is a series of minimal games set within small windows using the canvas element created by C.E.B. Reas. As you complete each puzzle, a new window will open with a new puzzle. All puzzles can be solved by clicking the mouse at the correct times.
Twitch
How fast can you solve them all? Each game only responds to clicking; mouse position and keyboard are ignored.
Works best in Chrome or Safari 4.
Sometimes the simplest ideas are the best. Darren Moore quite liked the main menu cursor in the hit WiiWare game World of Goo… so much so, he decided to make a copy of it using canvas!
Have a goo at the demo
World of Goo is a wicked game and well worth the $20! The game has a simple but cool cursor so I thought I’d have a goo at replicating it with HTML5 Canvas.
The canvas element is great for drawing, but when it comes to text there’s quite a bit missing – e.g. everything. Jim Studt has created a JavaScript plugin called canvas text which extends the canvas context by adding some extra options.
Fortunately the 1960s has come to the rescue. A. V. Hershey created a set of simple vector fonts for pen plotters which were released by the US National Institute of Standards (NIST). The code presented here encodes the printable 7-bit ASCII characters in a javascript file with a handful of functions to add text operations to the canvas element.
Canvas Text adds the following methods to context:
Phillip Green has created a useful testing site for canvas showing what is possible in each browser engine. The site contains 672 tests for everything from size to transformations, gradients to shadows. These tests also generate a report chart giving a quick guide for each rendering engine’s support.
A list of support
For each test, a green background indicates success, red indicates failure, blue indicates a need to manually confirm the output is as expected.
Thatcher Ulrich has created a perspective-correct texturing demo using triangle texture mapping. To quote Thatcher: “Old software-rendering tricks ride again!”
Not the latest newspaper, but impressive nevertheless
Thatcher explains how it works:
The subdivision method is fairly simple; the idea is that each triangle edge is tested to see how badly it needs perspective correction. Each edge is tested independently. Each edge that needs subdivision is bisected. This gives 8 cases for any triangle (each edge can either be bisected, or not), generating between 1 and 4 output triangles. Then the process is applied recursively. Because it is edge centric, adjacent triangles make the same decisions for shared edges, and there are no t-junctions.
Canopy is a fractal tree zoomer created by Ryan Alexander using the HTML canvas element. As the tree evolves, you’ll zoom in closer and closer… it’s all a bit trippy!
Creepy trees
Press play to start falling, click to go faster. Try turning Mutation and Bloom on. The tree will get a little weirder. What kind of forest is this?
Works best in Chrome or Safari 4.
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!
