Those of you who have played Loco Roco may be able to find some similarities between that game and this tech demo. Blob Sallad, created by Bjoern Lindberg, is essentially a physics demo with the ability to split, join, drag and drop the blobs.
- 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.
Dean McNamee has created a 3D cube full of the colours of the rainbow using canvas. The cube itself is semi-transparent throughout and can be rotated for those nice to see corner viewing angles.
Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.
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.
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!
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.
Canvas Text adds the following methods to context:
- ctx.drawText / ctx.drawTextRight / ctx.drawTextCenter: Draw text in the specified font and size at the position (baseline).
- ctx.measureText: Return the width of the text if it were drawn with the current settings.
- ctx.fontAscent / ctx.fontDescent: The ascent / descent from the baseline.
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.
For each test, a green background indicates success, red indicates failure, blue indicates a need to manually confirm the output is as expected.
Welcome to Canvas Demos
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
- canvas text
Adobe Illustrator Canvas Plugin
October 13th, 2010
Internet Explorer 9 Supports Canvas!
June 29th, 2010
IE9 Preview 2 Does Not Support Canvas
May 6th, 2010
AMD Announce Canvas for IE9?
March 20th, 2010
Canvas 2D Context Splits from HTML5 Spec
January 8th, 2010
April 1st, 2010
Top 100 Canvas Demos
March 13th, 2010
Welcome to Canvas Demos V2.0!
December 30th, 2009
Super Mario 64 Castle (April Fools)
April 1st, 2009
March 1st, 2009
Submit your demo
Submit your demo, and if we like it we'll feature it on Canvas Demos!