How To Fill Color Of More Than One Canvas Image?

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 i

Solution 1:

You can do your task with Compositing.

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);

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);

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);

then results

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

1. 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.

2. Draw the paw image.

3. Set compositing to source-atop so new drawings will only be drawn where the existing paw pixels exist.

4. 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.

5. Set compositing to destination-over so new drawings will be drawn under existing pixels.

6. Fill the yellow box. Your paw will not be overwritten because new (yellow) pixels will be drawn "under" your paw.

7. Set compositing back to the default source-over so new drawings will be drawn on top of existing drawings.

8. 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]=newImage();
  images[i].onload=myOnload;
  images[i].src=urls[i];
}
functionmyOnload(){
  imgCount--;
  if(imgCount>0){return;}
  start();
}
functionstart(){
  redrawWithNewPawColor()
}

functiondrawWithRecoloredPaw(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);

}

functionredrawWithNewPawColor(){
  drawWithRecoloredPaw(randomColor());
}

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

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

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

Solution 2:

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

Solution 3:

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