i drew an image using drawImage() api of html5 canvas. now i want to fill the white spaces of that drew image with different colors (individual box individual color). how can i do it? i am using html5 canvas and jquery.

i want to fill the white spaces with different color and those white spaces are not proper rectangular box.

thanks in advance.

i drew an image using drawImage() api of html5 canvas. now i want to fill the white spaces of that drew image with different colors (individual box individual color). how can i do it? i am using html5 canvas and jquery.

i want to fill the white spaces with different color and those white spaces are not proper rectangular box.

thanks in advance.

• javascript
• jquery
• html
• canvas
• fill

Share Improve this question Follow edited Sep 29, 2013 at 19:54 markE 105k1111 gold badges170170 silver badges183183 bronze badges asked Sep 29, 2013 at 0:24 Fahad BillahFahad Billah 42911 gold badge66 silver badges1919 bronze badges 2

• can you create a jsfiddle of the code you used and give a visual clue of what you are after? – otherDewi Commented Sep 29, 2013 at 0:27
• jsfiddle/azDNh here i want to fill the white spaces with different color and those white spaces are not proper rectangular box. – Fahad Billah Commented Sep 29, 2013 at 17:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

[ changed answer after clarification from questioner ]

Given: an image that has many fully-enclosed transparent areas.

This is a method to fill each transparent area with a different color:

1. Use context.getImageData to get an array of each canvas pixels [r,g,b,a] value.

2. Loop thru the array and find the first transparent pixel (the "a" value ==0)

3. Floodfill the entire transparent area containing that pixel with a new opaque color (replace the r,g,b values with your new color and replace the "a" value ==255).

4. Repeat step#2 until all the transparent areas have been filled with new unique colors.

To get you started...

William Malone wrote a very nice article on how to get and use canvas's [r,g,b,a] color array.

His article also shows you how to "floodfill" -- replace an existing color with a new color in an entire contiguous area.

In your case, you would replace transparent pixels with a new color.

This is his article:

http://www.williammalone./articles/html5-canvas-javascript-paint-bucket-tool/

[Addition to question: insert images into areas ]

You need to make each colorized area transparent again—one at a time

If you save each area's starting pixel from when you originally colorized the areas, you can start with that pixel and re-floodfill an area. This time you’ll set the alpha ponent of each pixel in that area to 0 (transparent).

As each single area is transparent you use positing to draw the new image only where the existing pixels are transparent. The posite you want is context.globalCompositeOperation=”source-out”.

These examples show:

• After uniquely colorizing each area.
• After making 1 area transparent (the top-right area is transparent).
• After positing an image into the transparent area.

//draw some white, green, and blue stripes

    for (var i = 0; i < canvas.width; i += 10) {
        for (var j = 0; j < canvas.height; j += 10) {
            context.fillStyle = (i % 20 === 0) ? "#fff" : ((i % 30 === 0) ? "#0f0" : "#00f");
            context.fillRect(i, j, 10, 10);
        }
    }
    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),
            pixels = imagedata.data;


       //if found white pixel i.e 255,255,255 changes it to 0,102,204

//you can change it to another color as u wish

    for (var offset = 0, len = pixels.length; offset < len; offset += 4) {

        if(pixels[offset]==255 &&
                pixels[offset+1]==255 &&
                pixels[offset+2]==255)

        {pixels[offset] = 0; //
        pixels[offset + 1] = 102; //
        pixels[offset + 2] = 204; //
        }

    }
    context.putImageData(imagedata, 0, 0);