Applications, games, tools and tutorials for the HTML5 canvas element
CanvasMol uses the HTML5 canvas element to good use with interesting diagrams of the structure for a variety of different molecule definitions such as TNT, Aspirin and DNA.
TNT
To use the demo, select an option from the left and then drag molecule to rotate. By using the options at the bottom of each diagram you can toggle which axis are rotated and change a number of graphical settings.
The application also allows for importing of PDB/SDF/MOL files and exporting to PNG format.
In U.F.O, by Jakub Matuška, you control an alien spacecraft being hunted by the people below. You must stay in the sky firing bombs at the tanks below who are trying to take you down.
Shoot the tanks
Comments from the Author:
U.F.O is a game with graphics that attempt to look retro. The game uses my own engine and has options menu to turn off sound and other effects and also a highscore table.
Controls are the cursor keys to move left and right; up to stay in the air and space bar to fire.
Toxicgonzo has created a canvas application which can read the contents of a 3D .OBJ file and display the results in real-time. This particular demo takes Blender’s monkey model and rotates it. It also displays how many FPS in the upper left corner.
Monkey head!
Comments from the Author:
Here’s the basics of how my app works:
1. A 3d .OBJ object is stored as a string in the javascript file
2. The .OBJ string is decoded to hold information about vertex position and which vertices form the polygons
3. Every polygon is assigned a random color
4. Matrix multiplication happens: Convert object from model space -> camera space -> clip space -> screen space
5. Z-sort the polygons based on the polygon’s centroid
6. Draw the polygons from back to front
Christoph Kappestein has used the canvas elements’ drawImage for rendering a voting comparison tool. The tool shows the user two images and asks them to choose which one they prefer.
Who do you prefer?
Comments from the Author:
It uses the canvas element to build from two images one image with additional information. It uses the Comparabl API where we get two images in base64 encoded format so that we don’t have to make two additional http requests to receive the images. In fact the project does not use canvas in a complex way but it shows how you can easily build an image on the fly with canvas from different sources.
Superluminal is a space shooter created by Mark Hall where you encounter waves of differing enemies and bosses in a fight across the galaxy.
Shoot and avoid
Use the arrow keys to move and either the control key or shift key to fire.
Michael Ryvkin has created a HTML5 canvas library which produces burning text using getImageData and putImageData to create a fire effect.
Burn baby burn
The script allows to create an effect of burning text with an ability to customize colors, font, burning speed and other parameters.
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!
