HTML5 canvas RGB histogram

This is yet another demo from around 2009. It’s simple enough. Click a button, draw an unbinned RGB histogram of the source image. 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. :)


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.