Fun with face detection, canvas and webcam video

With the getUser­Me­dia API, a video ele­ment, a can­vas ele­ment and LiuLiu’s excel­lent face detec­tion algo­rithm, we can eas­ily play around with web­cam video data in the browser, plug-in free. Mask over­lay experiment: Scaling content experiment: Cool! Fun with face detection, canvas and webcam video → Related: getUserMedia Moustache (via

Animated GIFs the Hard Way

The Sublime Text Website has some nifty animations to show of a few features. Turns out they’re not animated gifs. One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the <video> element. Animated GIF files would have been a […]

Suncalc 3D

SunCalc 3D is an HTML5 application with a 3D panoramic view of the sky that shows how the Sun moves during a particular day for a given location, along with important sunlight times such as sunrise, sunset, dawn and dusk. SunCalc 3D calculates sun data on the fly, uses Canvas for rendering, and Geolocation, Google […]


Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming […]


BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript. BrowserQuest → Background Info → BrowserQuest Source (GitHub) →

Spectrogram – Canvas based Musical Spectrum Analysis

Sound frequencies are displayed as they are heard. Lower frequencies are mapped low (bottom) to high (top). Brightness is determined by amplitude. Sweeping tones and rhythmic patterns create intricate structures. The circular form is in memorial of dead formats; the CD, MiniDisc and others. R.I.P. Here’s a Leesa’s The Mansion run through Spectrogram: Built by […]

getUserMedia Moustache

This demo uses getUserMedia (formerly known as HTML5 <device>) to get data from a device camera, then copies it into HTML5 <canvas> in order to analyse the pixel data. It then peforms facial recognition in order to superimpose a marvellous magical moustache. Special Opera Developer Build required. Magical getUserMedia moustache → Opera getUserMedia Labs Build […]