Output snapshots and screenshots of canvas elements directly in the console of the Chrome Dev Tools

var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");

// ...
// ...

console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size

Resulting output is the image picture above. Also supports creating a snapshot which outputs the canvas context call stack and state changes to the console.

console.snapshot →

Ejecta – Open Source JavaScript, Canvas & Audio Implementation for iOS

Ejecta is like a Browser without the Browser. It’s specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast.

Neat! And by the looks of it blazingly fast too!

Ejecta →

Chrome Experiment – Google “Roll It”

Roll It links your devices through Chrome: roll a ball from your phone to your laptop. Since the whole thing runs on Chrome, no apps, installs, or special configurations are needed – and any smartphone that runs Chrome can play.

Use your phone as a remote controller, thanks to websockets.

Roll It →



Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes').children[0];
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);

// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);

// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;

rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;

// Don't forget to tell two to render everything
// to the screen

Looks promising!

Two.js →

Deleting Borders

Amatorski, one of Belgiums finest bands, has been fascinated by the way the internet is deleting borders. They collaborated with We Work We Play to create an art project bringing together music and visuals, in a mix of online and offline interaction.

Implemented using a custom JavaScript Metronome and Howler.js;
Rendered on <canvas> with Delaunay triangulation on top;
Powered by node.js

Deleting Borders →
Accompanying Deleting Borders Blogpost →

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:


Fun with face detection, canvas and webcam video →


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 candidate, except for two issues: the 256 color limitation, which would have made the animations ugly, and the encoders I tried spat out huge files, at almost 1MB per-animation.

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

Deliciously hacky!

Animated GIFs the Hard Way →