Simon Willison’s Weblog

Instant colour fill with HTML Canvas (via) Shane O'Sullivan describes how to implement instant colour fill using HTML Canvas and some really clever tricks with Web Workers. A new technique to me is passing a canvas.getImageData() object to a Web Worker via worker.postMessage({action: "process", buffer: imageData.data.buffer}, [imageData.data.buffer]) where that second argument is a list of objects to "transfer ownership of" - then the worker can create a new ImageData(), populate it and transfer ownership of that back to the parent window. # 24th May 2023, 1:27 am

μPlot (via) “An exceptionally fast, tiny time series chart. [...] from a cold start it can create an interactive chart containing 150,000 data points in 40ms. [...] at < 10 KB, it’s likely the smallest and fastest time series plotter that doesn’t make use of WebGL shaders or WASM” # 14th October 2019, 11:03 pm

VoxelSpace (via) Lovely clear explanation of the voxel space landscape rendering technique used by NovaLogic for Comanche back in 1992, including a working JavaScript demo plus pseudo-code in Python. # 24th November 2017, 7:30 pm

PaintbrushJS. Impressive open source JavaScript library from Dave Shea for applying image filters (sharpen, blur, emboss, greyscale etc) to the canvas element. # 9th October 2010, 11:53 am

canto.js: An Improved HTML5 Canvas API (via) Improved is an understatement: canto adds jQuery-style method chaining, the ability to multiple coordinates to e.g. lineTo at once, relative coordinate methods (regular Canvas does everything in terms of absolute coordinates), the ability to use degrees instead of radians, a rounded corner shortcut, a more convenient .revert() method and a simple parser that can understand SVG path expressions! The only catch: it uses getters and setters so won’t work in IE. # 29th July 2010, 9:39 am

Music Notation with HTML5 Canvas. A pretty decent effort at rendering musical notation using JavaScript and the canvas element. # 12th May 2010, 8:53 am

Lou’s Pseudo 3d Page. Spectacularly detailed exploration of the road graphics used in racing games prior to true 3D. This is a potential gold mine for anyone looking for a fun project to try out with canvas. Bonus points for comet integration—I’m still looking forward to the first real-time multiplayer game in the browser using comet and canvas. # 8th February 2010, 11:21 am

Firefox 3.5 for developers. It’s out today, and the feature list is huge. Highlights include HTML 5 drag ’n’ drop, audio and video elements, offline resources, downloadable fonts, text-shadow, CSS transforms with -moz-transform, localStorage, geolocation, web workers, trackpad swipe events, native JSON, cross-site HTTP requests, text API for canvas, defer attribute for the script element and TraceMonkey for better JS performance! # 30th June 2009, 6:08 pm

Browsing my browsing. Roo Reynolds used the MeeTimer Firefox extension to gather statistics on his browsing habits, then extracted data directly from the SQLite database and generated his own graphs using PHP and the canvas element. # 10th April 2009, 8:48 am

Protovis. JavaScript graphing library based on canvas, with an elegant chaining style API. # 10th April 2009, 8:43 am

cufon. A promising alternative to sIFR, cufon uses VML on IE and canvas on other browsers to render custom fonts in the browser. You have to convert your font to JavaScript first, either using their free hosted tool or by installing the FontForge based server-side script yourself. The JavaScript encoded font file uses VML primitives to improve IE performance; the JavaScript library converts that to canvas calls for other, faster browsers. # 6th April 2009, 10:29 pm

jQuery Sparklines. Delightful Sparklines implementation, using canvas or VML in IE. A neat nod towards unobtrusiveness as well: you can specify your data as comma separated values inside a span, then use a single jQuery method call to convert the span in to a sparkline image. # 27th February 2009, 8:43 pm

OCR and Neural Nets in JavaScript. John dissects the brilliant Greasemonkey script that solves simple captchas using the canvas element and HTML5’s getImageData API. # 25th January 2009, 12 am

JSSpeccy. A ZX Spectrum emulator written in Javascript. # 29th October 2008, 5:25 pm

typeface.js. Outstanding hack—renders custom fonts using VML in IE and canvas in everything else, using fonts that are defined as a set of vector paths stored using JSON. # 27th October 2008, 11:45 pm

Antisocial. Matt Westcott (a.k.a. Gasman) provides some technical background to his awesome Antisocial 3D canvas demo. # 9th October 2008, 6:42 pm

Antisocial: a Javascript demo by Gasman. The demo is cool (3D on top of canvas); the “demotool” editor is simply amazing. # 8th October 2008, 3 pm

Processing.js. John Resig’s outstanding port of the Processing visualisation language to JavaScript and Canvas. Runs amazingly well in Firefox 3. One hell of a hack. # 9th May 2008, 8:24 am

Blob Sallad—canvas tag and JavaScript physics simulation experiment. Björn Lindberg provides a detailed code walkthrough of his brilliant canvas demo, inspired by Loco Rocco. # 26th January 2008, 12:25 pm

Taking the canvas to another dimension. Opera have finally released a test version with support for a opera-3d canvas context—Windows only for the moment, but Mac and Linux versions are promised “soon”. # 16th November 2007, 1:39 pm

XRAY web developer’s suite (via) Smart new bookmarklet from westciv—kind of like Steve Chipman’s MODI but with the addition of the canvas element for box model visualisation. # 30th July 2007, 5:11 pm

Ajax3d Demo. Really impressive Virus clone, using the canvas element. # 9th March 2007, 7 pm