How to fill color of more than one canvas image?

Question

It's my first time to use html5 canvas and I have no idea yet how it works.

My problem is, I have to modify the colors of the images in the canvas. It's easy if there's only one image. But, I will have more than one, in other words, overlapping images.

To further understand my question, I created an illustration. There will be 2 image files only, Image 1 and Image 2:

enter image description here

This is my current code (with fiddle here too):

HTML:

<canvas id="canvas1" width="600" height="600"></canvas>

JS:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var ctx2 = can.getContext('2d');


ctx.fillStyle = 'yellow'; // background color. box in the middle is transparent. try changing this to see the effect
ctx.fillRect(40,0,250,300); // not sure if there's other way to fill in the tranparent area. but I created a box behind the image

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

img.src = "http://s7.postimg.org/aruxhs8mz/pink.png"; //image 1


// I want to fill in the paw image too
/*ctx2.fillStyle = 'purple'; 
ctx2.fillRect(40,0,500,500); */

//should I declare something like this again?

var img2 = new Image();
img2.onload = function() {
    ctx2.drawImage(img2, 0, 0);
}

img2.src = "http://s7.postimg.org/69smposl7/paw.png"; //image 2
//paw initially colored light blue. i would like to customize the color of this too

I should be able to fill the paw image in the middle as well and not just the main image. How to do that?

I have created a fiddle just to enlighten you with my question.

Hope someone can help me for any advice.

Thanks a bunch!

Just to make shure that I understand what you want to do: Is it correct that you try to change the color of paw.png? — treeno, Jan 16 '15 at 10:14

score 7 · Accepted Answer · answered Jan 16 '15 at 16:20

You can do your task with Compositing.

enter image description here

Compositing tells the canvas what to do when drawing additional new drawings (pixels) on the canvas.

In your case, 3 compositing modes are useful to learn.

Source-over Compositing

The default method of compositing is 'source-over' where new drawings are drawn over existing pixels.

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// second draw a red source rectangle
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

enter image description here then results

Source-atop Compositing

'source-atop' compositing will draw new pixels only where the new pixels overlap the existing canvas pixels.

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='source-atop';

// second draw a red source rectangle
// (red will overwrite only where it overlapped the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

enter image description here then results

Destination-over Compositing

'destination-over' compositing will draw new pixels under the existing canvas pixels.

// first draw a blue destination rectangle
ctx.fillStyle='blue';
ctx.fillRect(30,30,50,50);

// set compositing to 'source-atop'
// (the new red pixels will only be drawn where
//  they overlap the existing blue pixels)
ctx.globalCompositeOperation='destination-over';

// second draw a red source rectangle
// (red will appear under the blue)
ctx.fillStyle='red';
ctx.fillRect(60,60,50,50);

enter image description here then results

Here's how to use compositing to change the color of your paw.

Clear the canvas. You cannot directly change the color of anything previously drawn on the canvas, so the typical workflow of canvas is to erase it and redraw items in their new positions & colors.
Draw the paw image.
Set compositing to source-atop so new drawings will only be drawn where the existing paw pixels exist.
Fill the canvas with your new paw color using fillStyle & fillRect. This causes your paw to be recolored because the newly colored rectangle pixels will only appear where your paw pixels currently exist.
Set compositing to destination-over so new drawings will be drawn under existing pixels.
Fill the yellow box. Your paw will not be overwritten because new (yellow) pixels will be drawn "under" your paw.
Set compositing back to the default source-over so new drawings will be drawn on top of existing drawings.
Draw your frame that's transparent in the center. Your paw and the yellow background will show through the transparent center of your frame.

Here's example code and a Demo:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var ctx2 = can.getContext('2d');

var images=[];
var urls=[];
urls.push('http://s7.postimg.org/aruxhs8mz/pink.png');
urls.push('http://s7.postimg.org/69smposl7/paw.png');
var imgCount=urls.length;

document.getElementById('recolor').onclick=function(){
  redrawWithNewPawColor();
};

for(var i=0;i<urls.length;i++){
  images[i]=new Image();
  images[i].onload=myOnload;
  images[i].src=urls[i];
}
function myOnload(){
  imgCount--;
  if(imgCount>0){return;}
  start();
}
function start(){
  redrawWithNewPawColor()
}

function drawWithRecoloredPaw(newPawColor){

  // clear the canvas
  ctx.clearRect(0,0,can.width,can.height);

  // draw the paw
  ctx.drawImage(images[1], 0, 0);  

  // set compositing to source-atop
  // so only existing pixels will be overwritten
  ctx.globalCompositeOperation='source-atop';
  // fill with new color
  ctx.fillStyle=newPawColor;
  // Because of compositing, only the paw is being color filled
  ctx.fillRect(0,0,can.width,can.height);

  // set compositing to destination-over
  // so new pixels will be draw behind existing (paw) pixels
  ctx.globalCompositeOperation='destination-over';
  // change the fill color to yellow
  ctx.fillStyle='yellow';
  // fill the yellow box
  ctx.fillRect(40,0,250,300);   

  // set compositing to the default of source-over
  ctx.globalCompositeOperation='source-over';
  // draw the transparent frame
  ctx.drawImage(images[0],0,0);

}

function redrawWithNewPawColor(){
  drawWithRecoloredPaw(randomColor());
}

function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<button id='recolor'>Recolor Paw</button>
<br>
<canvas id="canvas1" width=600 height=600></canvas>

Hi @markE, thank you so much for your answer. I will check and study on this compositing then I will update you. :) — novice, Jan 17 '15 at 03:44
just to confirm, will this still apply if there are more than 2 overlapping images? Like if I have to color more than 1 image. — novice, Jan 21 '15 at 02:30
Compositing tells the browser how to handle the relationship between existing and new pixels. As such, it works well for 2 overlapping images (as asked in your question). When you want to overlay 3+ images, you can use a second in-memory canvas to composite sets of 2 images at a time. Then draw each composited set as layers onto your on-screen canvas. Good luck with your project! — markE, Jan 21 '15 at 02:52

score 1 · Answer 2 · answered Jan 16 '15 at 10:19

the problem is that canvas does not allow you to adjust an image, but you could create a block over the paw wich has an opacity of 0.5 and than fill in the transparent part again, you could also use this: http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

score 1 · Answer 3 · answered Jan 16 '15 at 14:30

If the image is in your own web folder you can use it with an img tag and get the data an change it

much like the W3S example Changing image in canvas

after this step it's just a matter of redrawing the canvas with the new data

This will not work if the image comes from another source, becaus of security reasons

How to fill color of more than one canvas image?

3 Answers3

Linked