Canvas Dither

Description

Simple demo of image processing in Javascript using HTML5 and Canvas.

Includes a timer for performance testing
Now able to dither/process each channel (R, G and B) separately, producing interesting effects
Now allows for choosing your own image to process
Moved processing to a Web Worker
Now able to output images in three different formats! (Assuming your browser supports it)
Renders to an <img> element rather than just to a canvas
Can filter pixels using a simple threshold as well as Atkinson dithering (which, obviously, is what you're here for)

Create fallback for when web workers are not available
Enable drag-and-drop custom image selection
Improve compatibility
Probably going to re-style to look more like classic Mac OS (currently borrows a lot of design language and ideas from OS X, like fractal-thing.)

Enabled processing each channel separately, all required channels are processed in one pass
Tidied up some stuff, made JS create its canvas itself and render off screen
Added timers for performance testing

Render on every change
Added BMP output format
Added shortcut keys (numbers=dithering, alt+numbers=grayscale, letters=some other controls)
Added datalist for each range slider
Hide sliders when not relevant
Fire setup only when DOM ready
Added Decomposition grayscale
Added Desaturation grayscale
Added Desaturation grayscale
Added Shades grayscale
Added Single Channel grayscale
Added Disable dithering
Added Burkes dithering
Added False Floyd-Steinberg dithering
Added Floyd-Steinberg dithering
Added Jarvis-Judice-Ninke dithering
Added Sierra dithering
Added Sierra 2-row dithering
Added Sierra Lite dithering
Added Stucki dithering
Change spelling of greyscale to grayscale
Added output image scaling

Takes a lot of learned stuff from my fractal-thing project (and improves on it significantly).

Example image is by Keven Law, and sourced from flickr. Image is licensed under Creative Commons Attribution-ShareAlike 2.0 Generic.