HTML5 canvas area selection averaging

This is a demo from late 2009. It’s an extension of the single-pixel eyedropper I wrote previously. It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be fooled by the 2011 commits, those are just artifacts from svn->git migration. No guarantees that the histo’s are actually correct. :) Click and drag to set the image border to the average of the selected pixels.


JSImage was a basic, buggy, just-for-fun image processing library that I wrote in 2008/2009 when I first started seriously studying JavaScript. A stumbled across a book in my university library, and started implementing the algorithms on the newly available HTML5 canvas element. I’ve made several posts about JSImage which contain live demos. I think I put more work into code formatting than correct output. ;)


The unfortunately-named median-cut.js is the library that powers ColorPal’s palette generation. I say it’s unfortunately named because it doesn’t implement a pure median-cut algorithm. It’s identical, except that instead of cutting boxes at their median, they are instead cut at the mean. This results in more pleasing color palettes in most cases. Here’s a comparison: If you’re interested in median-cut vs mean-cut, see this post for a technical discussion. The code is available on GitHub.