I don't know if this is possible, I've never really used html canvas, but I am aware of

var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

but how do I use this to get for example all the pixels with a certain color and change these pixels to white? So let's say I have a pixel colored red:

if(pixel==red){
    pixel = white;
}

that's the simple version of what I would like but not sure how to do that...

anyone any ideas?

I don't know if this is possible, I've never really used html canvas, but I am aware of

var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

but how do I use this to get for example all the pixels with a certain color and change these pixels to white? So let's say I have a pixel colored red:

if(pixel==red){
    pixel = white;
}

that's the simple version of what I would like but not sure how to do that...

anyone any ideas?

• javascript
• html
• image
• canvas

• You got the answers; here's a demo jsfiddle.net/Dj82E – Rikonator Commented Oct 20, 2012 at 21:40

2 Answers 2

Do something like this (here's the canvas cheat sheet):

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const { width, height } = canvas;

const gradient = context.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0.25, "#FF0000");
gradient.addColorStop(0.75, "#000000");

context.fillStyle = gradient;

context.fillRect(0, 0, width, height);

setTimeout(() => {
    const image = context.getImageData(0, 0, width, height);
    const { data } = image;
    const { length } = data;

    for (let i = 0; i < length; i += 4) { // red, green, blue, and alpha
        const r = data[i + 0];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        if (r === 255 && g === 0 && b === 0 && a === 255) { // pixel is red
            data[i + 1] = 255; // green is set to 100%
            data[i + 2] = 255; // blue is set to 100%
            // resulting color is white
        }
    }

    context.putImageData(image, 0, 0);
}, 5000);

<p>Wait for 5 seconds....</p>
<canvas width="120" height="120"></canvas>

Hope that helps.

When you get the getImageData(), you have an object with data, width and height.

You can loop over data, which contains the pixel data. It's available in chunks of 4, which are red, green, blue and alpha respectively.

Therefore, your code could look for red pixels (you have to decide what makes a red pixel) and set the red, green and blue all on (to change it to white). You can then use putImageData() to replace the canvas with the updated pixel data.

// You will need to do this with an image that doesn't violate Same Origin Policy.
var imgSrc = "image.png";
var image = new Image;

image.addEventListener("load", function() {

    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");

    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, 0, 0);

    var imageData = ctx.getImageData(0, 0, image.width, image.height);
    var pixels = imageData.data;
    var i;

    for (i = 0; i < pixels.length; i += 4) {
        // Is this pixel *red* ?
        if (pixels[i] > 100) {
            pixels[i] = 255;
            pixels[i + 1] = 255;
            pixels[i + 2] = 255;
        }
    }

    ctx.putImageData(pixels);

});

image.src = imgSrc;​