2

I am creating a color picker using javascript and the HTML5 canvas. I'm attempting to use the following code to get the color of a specific pixel on the color picker, but it just returns black every time: rgb(0, 0, 0). However, if I replace this.getGradientPos.X and this.getGradientPos.Y with hard-coded values, it works fine. It also works if only one of the X or Y variables is in place and the other is hard-coded. In the console, curGradPos.X and curGradPos.Y both show correct positions. I'm at a loss as to what could be wrong. 

ColorPicker.prototype.getGradientColor =
function()
{   
    j = this.context.getImageData(this.curGradPos.X, this.curGradPos.Y, 1, 1);
    k = j.data;
    console.log(this.curGradPos);
    console.log(k);

    return {r: k[0], g: k[1], b: k[2]};
}

This initializes the variables.

function ColorPicker()
{
    this.canvas = document.getElementById('colorPicker');

    this.curColor = this.baseColor = {r: 255, g: 0, b: 0};
    this.context = this.canvas.getContext('2d');

    this.curGradPos = {X: 255, Y: 255};
}

And this updates the curGradPos variable on mousemove.

rect = this.canvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;

if (x >= 15 && x < 15+255 && y >= 15 && y < 15+255)
{
    this.curGradPos = {X: x, Y: y}; //seems to be correct
    this.drawColorGradient();
    this.curColor = this.getGradientColor(); //above function with issue
}
shaqb4
  • 283
  • 1
  • 3
  • 11
  • Please show the code (or the essential part of it) so we can see how context, curGradPos comes about. –  Sep 25 '13 at 19:45
  • possible duplicate of [getPixel from HTML Canvas?](http://stackoverflow.com/questions/667045/getpixel-from-html-canvas) – ColinE Sep 25 '13 at 19:45
  • 1
    @ColinE not a duplicate IMHO - the OP clearly knows _approximately_ how to retrieve a pixel, the question is why this specific code is allegedly failing. – Alnitak Sep 25 '13 at 20:04
  • @shaqb4 Your code appears to be generally correct. please create a jsfiddle that demonstrates your problem. – Alnitak Sep 25 '13 at 20:04
  • Do you create an instance by using new, e.g `var cp = new ColorPicker()` –  Sep 25 '13 at 20:10
  • I successfully retrieved and manipulated pixels in other parts of the code. Just this one function isn't working for some reason. And yes, I create an instance. – shaqb4 Sep 25 '13 at 20:10
  • Are you trying to pick a color from an image, and if so, is the image loaded from same origin (server/scheme) or is the image from a cross-origin source? –  Sep 25 '13 at 20:17
  • 1
    I don't use an image, I just draw a gradient. My code is hosted at http://shaqzone.com/skinapp/. You're supposed to be able to draw the chosen color on the avatar. – shaqb4 Sep 25 '13 at 20:34
  • @shaqb4 What is `this` pointing to in your last code block? Is this wrapped in a function? If so, you mustn't specify that function as a (direct) mousemove callback because `this` = `DOMElement` in that case. **/Edit:** You're correctly attaching the event handler according to your live site. – ComFreek Sep 25 '13 at 20:43
  • Ken- I saw your last answer about the marker and dealt with it. It seems to work now, as far as I can tell :). I'm not sure what you mean in your comment. – shaqb4 Sep 25 '13 at 21:24

1 Answers1

1

The code seem to read the color from the marker rather than the color "behind" it.

The color needs to be read from the position and then set the marker or you will get the color of the marker instead in that position; and of course as the marker is black that color will be returned each time.