HTML5 Canvas getImageData value pixel color flickering white and black

Question

I'm creating a color picker and I have it pulling the color from the HTML5 canvas with the gradient. Most of the time it's displaying the proper color, but sometimes it will randomly display white or black. I have a demo below where it logs all blacks and whites (other than the top left and the bottom pixels).

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

The code in question, at the very bottom, is this:

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

(I removed the logging code for the snippet above)

Why is this flickering white and black when dragging around the circle on the top gradient?

Answer 1

Warning : get your head far enough from any wall before reading :-)

You were measuring... the color of the cursor (black == '#000000'), that's why you had those strange zeros.
To see it quickly, just type return; at the start of drawCursor() : no more zero.
To fix it (re)draw before measuring color with getColor() inside mouseMoveListener() :

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