🖼 Simple demo of image processing in Javascript using HTML5 and Canvas
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5878632 May 4, 2016


Canvas Dither


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

Recent Changes

  • 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)

Future Plans

  • 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.)

Version History


  • Full implementation of algorithm in main JS thread
  • Renders to an <img> element


  • Moved to Web Workers


  • Allowed custom image uploads
  • Deal more effectively with large/broken/invalid images


  • 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


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.