HTML5 Canvas getImageData значение пиксель цвет мерцающий белый и черный

Question

Я создаю подборщик цветов, и у меня есть вытягивание цвета из холста HTML5 с помощью градиента. Большую часть времени он отображает правильный цвет, но иногда он будет случайным образом отображать белый или черный. У меня есть демо ниже, где записываются все черные и белые (кроме левого верхнего и нижнего пикселей).

DEMO: http://jsfiddle.net/ek2kD/

Код в вопросе, в самом низу, это:

function getColor() 
{ 
    var pixelColor = contextTone.getImageData(mouseXGo, mouseYGo, 1, 1).data; 
    var hex = "#" + ("000000" + ((pixelColor[0] << 16) | (pixelColor[1] << 8) | pixelColor[2]).toString(16)).slice(-6); 
    document.getElementById("preview").style.backgroundColor = hex; 
} 

(я удалил код протоколирования для приведенного выше фрагмента кода)

Почему это мерцающий белый и черный при перетаскивании по кругу на верхнем градиенте?

Answer 1

Внимание: получить голову достаточно далеко от стены, прежде чем читать :-)

Вы мерили ... цвет курсора (черный == «# 000000»), поэтому у вас эти странные нули.
Чтобы увидеть это быстро, просто введите return; в начале drawCursor(): не более нуля.
Чтобы исправить это (ре) рисовать до того измерения цвета с getColor() внутри mouseMoveListener():

function mouseMoveListener(evt) { 
    // same code here ... 
    draw(); 
    getColor(); 
    drawCursor(); 
}