Sketch This Page

Abusing the Canvas Tag for Fun and Profit (ok, maybe no actual profit)

(Before we start, this page contains a live Javascript example. This will work on recent versions of Firefox and Opera. Safari users will require the new Safari 4 beta. It will not work on any current version of Internet Explorer.)

Sketch This Page!
(Drag this link into your bookmarks bar)

Try clicking the "Sketch This Page" link to see what happens. If you are using a sensible browser you should see the picture change. It works by replacing any <img> elements on a page with canvases that are created using a custom (and hacky) dithering scheme using the image's original pixel data.

You can use this on other sites by dragging the "Sketch This Page" link to your bookmark bar. This will create a "bookmarklet" that you can press at any time, even on other sites.

If you do this you will find that it does not work on every site. Your browser will not let Javascript access images that are not served from the same domain as the main page. This is a sensible restriction for security reasons, but it does mean that Sketch This Page! will not work on major sites like Google, Facebook, and Flickr. If you want to try it out on a few images that do work, try my gallery.

Back to my homepage