HTML 5 canvas room for improvement?

Question

I have built this image using html 5 canvas,

http://jsfiddle.net/nvcode/YGD3q/1/

I was hoping if someone could give me some pointers on how to extract the pixel colour on mouse move, and if possible how to make it so that instead of having a full horizontal spectrum, and a then vertical white to transparent to black to white on top, maybe have a hue setting to down full colour to produce the grays? I have no idea on how I would do this?

Thanks

Answer 1

For the record it is considered bad form to ask more than one (complex) question in the same SO question.

Here you go for the first part:

http://jsfiddle.net/YGD3q/4/

elem.addEventListener('mousemove', function(e) {
    var x = e.offsetX; // lame but close enough for now
    var y = e.offsetY;
    var data = context.getImageData(x, y, 1, 1).data;
    // just paint it to the bottom right as an example for now:
    context.fillStyle = 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
    context.fillRect(280,280,20,20);    
}, false);