Canvas Color Picker

Colour Picker Canvas

circle.pngI really quite liked the Color Sphere by Color Jack. However the code was a little, um, terse. Having a look at his code it looks like he uses the image as a reference and then computes the HSV values using the algorithm  that's used to produce the picture - pretty cool.

But wouldn't it be simpler to just pick the pixel in the image when you click?? Sure! but... you can't, due to javascript limitations/security. Damn. Oh wait what about <canvas>.

So I did a little experiment and here is the result (sorry won't work in IE8).

Canvas drawImage example 1

Oh, sorry I don't get Canvas yet
color is #346500

So here is the script:
// use jQuery on page load to draw the canvas image

$(function() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'media/show/280';
img.onload = function(){
$('canvas').bind('mousemove', function(event){
var x = event.pageX - event.currentTarget.offsetLeft
var y = event.pageY - event.currentTarget.offsetTop;
var ctx = document.getElementById('canvas').getContext('2d');
var imgd = ctx.getImageData(x, y, 1, 1);
var data =;
var out = $('#result');
var hexString = RGBtoHex(data[0],data[1],data[2]);
out.html("color is #" + hexString);
out.attr("style","background-color: #" + hexString + ";");


function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}

function toHex(N) {
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);

and the HTML looks like this:
<h2>Canvas <code>drawImage</code> example 1</h2>
<canvas id="canvas" width="370" height="370" >Oh, sorry I don't get Canvas yet</canvas>
<span style="" id="result"></span>

Copyright © nerdErg Pty Ltd 2012 ABN 20 159 294 989