I have loaded an image of a color wheel on to a canvas and I have a list of hue values in an array. I loop over each pixel on the canvas and remove the pixels that match the same hue values.

The code for that is:

var element = document.getElementById("wheel-canvas");
var c = element.getContext("2d");   
var image = c.getImageData(0, 0, 375, 375);
var imageData = image.data;
paletteList = this.collection.pluck('hsv');
for (var i = 0, n = imageData.length; i < n; i += 4) {
    var hsv = this.model.convertRGBToHSV(imageData[i], imageData[i+1], imageData[i+2]);
    var hue = hsv[0];
    var sat = hsv[1];
    var val = hsv[2];
    $.each(paletteList, function(index, value) {
    if (hue === value[0])   
    {
        imageData[i] = '0';
        imageData[i+1] = '0';
        imageData[i+2] = '0';
    }
    });

}

   c.putImageData(image, 0, 0);

Now I want all pixels that DON'T match the hues to bee black. I make a code change:

if (hue !== value[0])   

and I get the following result:

Why doesn't it look like the inverse of the first circle?

Thank you!

I have loaded an image of a color wheel on to a canvas and I have a list of hue values in an array. I loop over each pixel on the canvas and remove the pixels that match the same hue values.

The code for that is:

var element = document.getElementById("wheel-canvas");
var c = element.getContext("2d");   
var image = c.getImageData(0, 0, 375, 375);
var imageData = image.data;
paletteList = this.collection.pluck('hsv');
for (var i = 0, n = imageData.length; i < n; i += 4) {
    var hsv = this.model.convertRGBToHSV(imageData[i], imageData[i+1], imageData[i+2]);
    var hue = hsv[0];
    var sat = hsv[1];
    var val = hsv[2];
    $.each(paletteList, function(index, value) {
    if (hue === value[0])   
    {
        imageData[i] = '0';
        imageData[i+1] = '0';
        imageData[i+2] = '0';
    }
    });

}

   c.putImageData(image, 0, 0);

Now I want all pixels that DON'T match the hues to bee black. I make a code change:

if (hue !== value[0])   

and I get the following result:

Why doesn't it look like the inverse of the first circle?

Thank you!

• javascript
• canvas

• stackoverflow./questions/359494/… – Kees C. Bakker Commented Jan 3, 2012 at 10:35
• I agree with Kees C. Bakker - the operator is not the issue. Please publish the entire document so we can run & debug it to find the problem. – guy mograbi Commented Jan 3, 2012 at 10:51

5 Answers 5

Your logic for determining which pixels to set to black is wrong.

Note that in your each loop, the hue of each pixel will not be equal to some hues in the pallette list, thus all of them will be set to black.

what you really want to do on each pixel is to detect whether its hue is in the pallet list or not.

var matched = false;
$.each(paletteList, function(index, value) {
    if (hue === value[0]) {
        matched = true;    
        return false;
    }
}
if (!matched) {
    imageData[i] = '0';
    imageData[i+1] = '0';
    imageData[i+2] = '0';
}

You need to use != for 'is not equal', since you only want to pare the values.
Check this: Javascript parison

!== will also pare the identity / objects, which are not the same (as Kees mentioned).

There is a difference between equality and identity.

Equality (==, !=)

• If the types of the two expressions are different, attempt to convert them to string, number, or Boolean.
• NaN is not equal to anything including itself.
• Negative zero equals positive zero.
• null equals both null and undefined.
• Values are considered equal if they are identical strings, numerically equivalent numbers, the same object, identical Boolean values, or (if different types) they can be coerced into one of these situations.
• Every other parison is considered unequal.

Identity (===. !==)

These operators behave identically to the equality operators except no type conversion is done, and the types must be the same to be considered equal.

Source. So the !== can't be the problem.

Couldn't find the operator you are referring to. I suggest you use !( a=== b)

have a look at w3school list of javascript operators

You are paring a string with an integer using !== this will always return false. Check on http://jsfiddle/k4EAQ/

Using != Javascript does not check the type and will give you what you want. But if you like to use !== you can always convert the variable to an integer or a string so you are sure they match the type.

How do I convert a string into an integer in JavaScript?