Canvas


Canvas is an element of HTML5 that allows for dynamic, scriptable rendering of 2D shapes and bitmap images that is currently supported by Mozilla Firefox, Google Chrome, Safari and Opera.


Tuesday, July 7th, 2009

Open Web Tools Directory

Category: Canvas, Mozilla, Utility

Over at the Mozilla Labs blog, we just launched an “Open Web Tools Directory”. Running Ajaxian for the past few years, we’ve discussed a legion of developer tools of all shapes and sizes, but there are so many we’ve quickly lost track of all that’s available. With the Tools Directory, we hope to provide a Read the rest…

Posted by Ben Galbraith at 2:46 am
15 Comments

+++--
3 rating from 41 votes

Tuesday, June 16th, 2009

Doodle: Sprite library for Canvas

Category: Canvas

Billy Lamberta got tired having to get so low-level as you do with the raw Canvas API. So, he create a small abstraction layer: Doodle.js attempts to create a fun and easy way to interact with the Canvas that is lightweight, flexible, and functional. While it contains a few shape primitives it is not meant Read the rest…

Posted by Dion Almaer at 5:36 am
2 Comments

+++--
3.9 rating from 34 votes

Tuesday, June 9th, 2009

Finally, a useful blink tag! Detecting your user blinking

Category: Canvas, Showcase

Dave Burke just gave an awesome demo at GDD Beijing. Fire up Firefox 3.5beta (for now) and head over here and watch the human blink detection in action! Here Dave tells us more about his awesome hack: Inspired by a demo by Paul Rouget, I’ve created an image processing demo that detects eye blinks in Read the rest…

Posted by Dion Almaer at 11:59 am
15 Comments

++++-
4.3 rating from 31 votes

Tuesday, May 19th, 2009

Locking onto beat; More visualizations of music

Category: Canvas, Showcase

“darkimmortal” has created another really nice visualization of music that uses Canvas and SoundManager2 to do its work. Do yourself a favour, and hit play to see the funk The example uses two canvases, one to do the logic wave work, and then it is copied into the main canvas that you see ctxR.drawImage( ctxL.canvas, Read the rest…

Posted by Dion Almaer at 7:31 am
16 Comments

++---
2.5 rating from 41 votes

Monday, April 27th, 2009

Google and Mozilla 3D Round-up

Category: 3D, Canvas, SVG

About a month ago, we covered an announcement about Mozilla’s plans to basically put OpenGL ES in the browser and call it Canvas 3D and to do so working with a new working group over at the OpenGL standards body, Khronos. This week, we covered Google’s own 3D announcement, a plug-in offering a high-level scene Read the rest…

Posted by Ben Galbraith at 7:00 am
14 Comments

+++--
3.7 rating from 35 votes

Wednesday, April 22nd, 2009

Dynamic Content Injection with HTML5 Canvas and Video

Category: Canvas, Examples, Firefox, Video

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection. Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas. How did Read the rest…

Posted by Dion Almaer at 8:50 am
5 Comments

+++--
3.7 rating from 66 votes

Monday, April 20th, 2009

Visualizing sort algorithms with Canvas

Category: Canvas, Fun

The image above is a visualization of a bubble sort with 15 elements. Jacob came up with the goods again as he was inspired by Aldo Cortesi’s work doing this with Cairo. Nicely done guys. If we ever get a sort algorithm question again not only will we be able to give the big O Read the rest…

Posted by Dion Almaer at 2:36 am
Comment here

+++--
3.8 rating from 21 votes

Tuesday, April 14th, 2009

Metatunnel: The (Future) Web Strikes Back

Category: Canvas, Fun

Last week, we posted a story on the Metatunnel demo, a concisely-written Linux and Win32 demo that Paulo Falcão ported to JS. We looked at the pitiful performance of the JS version as evidence that, high-speed JS engines notwithstanding, the web’s got a ways to go on the fx front. We didn’t dig deep enough. Read the rest…

Posted by Ben Galbraith at 7:00 am
9 Comments

++---
2.9 rating from 30 votes

Friday, April 10th, 2009

Metatunnel 1k Demo: JS vs. OS

Category: Canvas, Fun

Dion and I talk frequently about how the web platform’s capabilities are approaching the desktop, which features like canvas and faster JavaScript run-times. It’s great to get a piece of humble pie like this one. FRequency created an interesting demo (as in “demo scene”) of a “metatunnel”: Paulo Falcão ported this to JavaScript using <canvas>; Read the rest…

Posted by Ben Galbraith at 7:00 am
15 Comments

++---
2.6 rating from 20 votes

Thursday, April 9th, 2009

canvas-text: Add text functions to subpar canvas implementations

Category: Canvas

Fabien Ménager has created an interesting new library called canvas-text that simply “adds the three canvas text functions (strokeText, fillText and measureText) to the canvas implementation of the browsers which don’t already have these functions (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3, Chrome 1.0). It doesn’t change the already implemented functions in Firefox Read the rest…

Posted by Dion Almaer at 8:06 am
6 Comments

+++--
3.9 rating from 54 votes

Safari-style Candybars for Everyone

Category: Canvas, JavaScript, Library, UI

Christian Effenberger wrote in with another impressive piece of work: Gauge.js 1.0 allows you to add programmable gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On older browsers, it’ll degrade Read the rest…

Posted by Ben Galbraith at 7:00 am
5 Comments

+++--
3.9 rating from 45 votes

Monday, April 6th, 2009

Great visualizations with Protovis

Category: Canvas, JavaScript

I have been very impressed with Andrew Sutherland of the Mozilla Messaging team (which is one reason that I have faith that I will dump Gmail for something he and the Messaging team come up with one day ;) and the visualizations that he is playing with are quite cool indeed. Seeing your email in Read the rest…

Posted by Dion Almaer at 8:29 am
5 Comments

++++-
4 rating from 20 votes

Wednesday, March 25th, 2009

3D APIs are coming to the Web in force

Category: Canvas, Mozilla

There have been a few posts on the news that “in response to a proposal from Mozilla, Khronos has created an ‘Accelerated 3D on Web’ working group that Mozilla has offered to chair.” Chris Blizzard (Director of Evangelism for Mozilla, and top chap) has some really good comments: We’ve started to see more and more Read the rest…

Posted by Dion Almaer at 8:59 am
11 Comments

+++--
3.9 rating from 36 votes

JuicyDrop: More fun with music visualizations

Category: Canvas, JavaScript, Showcase

Jacob Seidelin is at it again, with another music visualization using canvas and more: A couple of weeks ago I played around with music visualization using JavaScript/canvas and SoundManager2. Well, I couldn’t leave it at that and as I mentioned in the comments, I had an eye on the MilkDrop plugin for Winamp. The result Read the rest…

Posted by Dion Almaer at 4:17 am
5 Comments

++++-
4.6 rating from 36 votes

Monday, March 23rd, 2009

Explorer Canvas updated for IE 8 and more

Category: Canvas

Erik Arvidsson, one of our Knights, has shared a new Explorer Canvas release that has enabled excanvas folks to keep on trucking wrt IE 8 users. The way IE 8 does VML has been tweaked, so the library had to be changed accordingly. You can also check out the Silverlight bridge too. Here are the Read the rest…

Posted by Dion Almaer at 5:18 am
2 Comments

+++--
3.9 rating from 19 votes

Tuesday, March 17th, 2009

Unobstrusive Image Puzzle Maker with Canvas

Category: Canvas, Fun

Wow. Christian Effenberger pointed us to his impressive Snapfit.js project. Snapfit takes any picture and, if the browser has support for canvas (or VML), will make it into a puzzle. Not just any puzzle, mind. A potentially wicked hard puzzle where the pieces can be mirrored in either axis. But, not to worry, if you Read the rest…

Posted by Ben Galbraith at 7:00 am
2 Comments

++++-
4.3 rating from 28 votes