5 clever uses of the canvas tag
If there is one thing that really gets me exciting about the upcoming HTML 5 specification it’s the canvas tag. This relatively simple tag holds so much potential and power thanks to the strong well thought out JavaScript API available to manipulate what appears on the canvas.
I’ll be looking at 5 really ingenious implementations that are being used today on various websites and web apps.
5. Typeface.js
A great solution to use custom fonts on your websites without having to cut out the text as images. This generates JavaScript from an otf file which renders out the font using the canvas tag. Rendering text with Javascript, <canvas>, and VML
4. Box2DJS physics engine
This library is for recreating elements on a canvas that obey the laws of physics such as gravity and motion. Objects can interact with each other in a realistic manner. Physics Engine for JavaScript
3. Wolfenstein 3D
A great port of the classic Wolfenstein 3D done using nothing but javascript and canvas. Javascript Wolfenstein 3D
2. Yahoo pipes
Yahoo pipes is a mash up tool for the less technical to build “pipes” or mashups of data pulled from various sources. Pipes uses the canvas tag to create connecting points between data sources and controls. The blue curvy line is done using canvas and its bezier abilities to curve lines.
Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.
1. Mozilla labs Bespin
By far the best implementation of canvas so far is Mozillas Bespin a web code editor which uses canvas to create it’s slick interface, without canvas Bespin would not be as responsive as it is even with thousands of lines of code.
Bespin is a Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
Post filed under: javascript, xhtml.
Comments
Trackbacks
-
[...] A complete set of methods supported by the 2D context can be seen from this page. Mozilla is hosting a basic example for using canvas element, where you can learn the canvas element’s basics. And to see what and all is possible with canvas element, check out 5 clever uses of canvas element. [...]
-
[...] (sorry voor het Engels) –SHOWCASE HTML5 Demos and Examples – beknopte lijst van demo's 5 clever uses of the canvas tag | The CSS Ninja – All things CSS, Javascript & xhtml – voorbeelden van het <canvas> element quake2-gwt-port – Project Hosting on Google Code – [...]
-
[...] Read more here [...]
-
[...] 5 Clever uses of the CANVAS tag – CSS Ninja [...]
-
[...] 8. 5 Clever Uses of the Canvas Tag [...]
-
[...] 5 clever uses of the canvas tag – [CSS] Ninja April 20, 2011 [...]
-
[...] vs. Silverlight charts7. HTML5 Canvas Element Guide非常好的 HTML5 canvas 元素教程。8. 5 Clever Uses of the Canvas Tag5个基于 HTML5 canvas 元素实现的非常棒的应用。9. Canvas Demos使用 HTML5 canvas [...]
Very nice article. The web is changing reaaally fast!
Oliver Mezquita, October 31st, 2009hey i want to know how can i use canvas tag . till now i dont know how can i use it pls help me if you tell me the basics of canvas tags. pls mail me
amit tyagi, May 24th, 2010I needed canvas only for jscad.
mooph, June 1st, 2010