HTML 5 холст пространство для улучшения?

Question

Я построил это изображение, используя HTML 5 canvas,

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

Я надеялся, что кто-нибудь может дать мне несколько советов о том, как извлечь цвет пикселя при перемещении мыши, и, если возможно, как сделать так, чтобы вместо полного горизонтального спектра, а затем от вертикального белого до прозрачного или черного цвета к белому сверху, может иметь настройку оттенка, чтобы уменьшить цвет, чтобы получить серые? Понятия не имею, как бы я это сделал?

Спасибо

Answer 1

Для записи считается неправильным задавать более одного (сложного) вопроса в одном и том же вопросе SO.

Вот первая часть:

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);