Turning photos into beautiful art with HTML5

(click image to toggle original)

Image source: Heimaey

I’ve been kicking this idea around in my head, and decided to implement it while learning how to canvas in HTML5:
simplification of an image by drawing a bunch of lines

  1. Choose a pixel.
  2. Within some range around it, find another pixel with a similar colour.
  3. Draw a semi-transparent line to it, filled with a gradient from one colour to the other.
  4. Repeat a lot.

This creates a bunch of blurring, but usually constrained within objects due to the colour threshold.


thin lines


very thin lines


reversed logic


Here’s the JSFiddle. It’s really slow.