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.
Diagramo by Alex Gheorghiu allows you to easily create, edit and share diagrams providing a similar user experience as regular desktop applications. With Diagramo, you can create organization charts, diagrams, network architecture diagrams, graphs and landscape designs. The entire editor is based on HTML5, using the canvas element as the cornerstone of the entire editor.
Canvas Diagrams
Visit the Diagramo site for a video preview and to start using Diagramo!
Josh Strike’s StrikeDisplay is a development kit that lets you draw, animate and interact with “Sprites” inside a canvas, letting you code canvas JavaScript in a method similar to Flash ActionScript 3. StrikeDisplay supports area redraws within canvas for faster animation, in-canvas mouse events, display chain hierarchy with z-ordering, attachment of images and divs to “sprites” within the canvas, tweening and more.
Example of parent-child relationships and boundary finding.
StrikeDisplay is initialised with a single line of code that automatically creates a stage, display and event chains inside your canvas element. The following code would draw a 30×30 black rectangle just off the center of the stage and fade it up over 10 seconds:
var s = new Sprite();
s.graphics.beginFill("#000000",1);
s.graphics.drawRect(0,0,30,30);
s.x = root.stage.stageWidth/2;
s.y = root.stage.stageHeight/2;
s.alpha = 0;
root.stage.addChild(s);
var tween = new Tween(s,"alpha",EaseOut,0,1,10);
Josh has created some simple demos which show mouse events, clipping and masking and an arkanoid demo.
Javalanche by Zach Dicklin is a Javascript port of the classic Avalanche game using the canvas element. In the original game, players were required to catch the falling rocks. In this version, you must avoid the rocks for as long as possible.
Avoid the falling rocks
Use the A and D key to move left and right. Press Space to start.
For Arcade Fire’s latest song “The Wilderness Downtown”, music video director Chris Milk collaborated with Google’s Creative Lab to produce an interactive video built with HTML5. Among the different technologies applied, canvas is used to render the flocking birds (that fly away from your mouse clicks) and to provide colour correction throughout.
The Wilderness Downtown
Comments from the Director:
Google wanted a creative way to showcase what was possible on the web with HTML5 and the band wanted an innovative visual that could work like a traditional music video.
Biolab Disaster is a platform shooter built by Dominic Szablewski using his forthcoming ImpactJS engine.
Jump and shoot
Comments from the Author:
Biolab Disaster formulates the playable truth that it makes sense to create games for HTML5. Not only is the result on par with current Flash games, but also is the development process incredibly smooth and satisfying.
Brad Estey has built a HTML5 page flip application using canvas to render, rotate, and mask the pages.
Rectoverso
Comments from the Author:
It can scale automatically to fit any size images and since it’s Canvas based, it can allow other HTML elements on the page to interact with it through simple Javascript functions.
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!
