Satoshi Ueyama has created 3 amazing demos of 3D objects and texturing on a 2D canvas to prove that JavaScript and canvas can render textured 3D scenes. However, the performance of these demos is heavily reliant on the browser’s JavaScript engine. Therefore, we recommend you open the following links using Google Chrome.
In the demo, click the cloth to create a small wind effect.
The first demo shows simple texture mapping. Textures are mapped on “cloth” model that consists of polygon mesh. Textures deform following swing of the cloth.
3D Miku will move her arm if you click her in the demo.
The second demo renders a model composed on modeling tool. This is the heaviest demo, which contains about 1400 polygons.
3D iPod with a metallic reflection around the back
The third demo shows a technique called “Sphere Environment Mapping”. Sphere environment mapping renders pseudo metallic reflection by mapping a texture that contains “environment” from object’s view. This demo looks very attractive but is not hard to implement. Difference between previous demos and this demo is not much — Generate texture coordinates dynamically or store statically.
Jérôme Wax has created this fantastic Flickr Canvas slideshow in the style of the photo slideshow on the Playstation 3.
A gorgeous slideshow effect using canvas HTML
The slideshow scrolls thumbnails of your photos from the right rotating them and giving them a small border to add effect. By hovering your mouse to the right hand side, you can speed up the scrolling effect. If you hover on the left, you can reverse the scroll. Clicking the photo thumbnail loads the photo below.
Jacob Seidelin has created this great cheat sheet for experienced users of the canvas element.
The Canvas Cheat Sheet is a really useful document
The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.
Jon Combe has produced a highly detailed world map using the canvas HTML element.
The demo allows you to style the map with a variety of predefined colours matching sites such as Google Maps and BBC News, but also allows you to select your own colours too. You can also zoom in on countries should you not wish to display an entire world map.
Canvas Demos style World Map
If you’re interested where I got my data from I downloaded a big file from Wikimedia Commons which I opened in Adobe Illustrator where I plotted the country outlines. I then exported this as an SVG file and using a little jQuery looping jiggerypokery I extracted the coordinates.
Jon has released the source as free software under the MIT Licence; but would love to know if you do use it.
Box2DJS is a JavaScript port of Box2D Physics Engine, and was created by Robert Kieffer. The original Box2D engine was designed as a 2D rigid body simulation library for games. Programmers are able to use it to make objects move in believable ways and make the world seem more interactive.
Physics demo from Box2DJS
The website provides several physics demos which you can interact with by left clicking with the mouse to add new objects; as well as code samples to get you started in creating your own physics demos.
Bill Mill has created a fantastic tutorial for any canvas programming wannabes, where he runs through the steps needed to create a Breakout clone. The tutorial consists of 12 very clear and concise steps, where you can view a demo of how your project should look so far.
On every page, you’ll be able to click the “run code” button to run the code we’ve developed so far. Every page besides this one has an editor in it containing the javascript code that will be run in the same box as the game as soon as you click the button. You can make changes to the code, and see the results instantly by clicking the “run code” button.
Breakout clone
Thanks Bill for spending the time creating this detailed tutorial!
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
