title: How to fill color of more than one canvas image?
body: <p>It's my first time to use html5 canvas and I have no idea yet how it works. </p>
  
  <p>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. </p>
  
  <p>To further understand my question, I created an illustration. There will be 2 image files only, Image 1 and Image 2:</p>
  
  <p><img src="https://i.stack.imgur.com/x9QBK.png" alt="enter image description here"> </p>
  
  <p>This is my current code (with <a href="http://jsfiddle.net/3nq4acts/" rel="nofollow noreferrer">fiddle</a> here too):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="canvas1" width="600" height="600"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I should be able to fill the paw image in the middle as well and not just the main image. How to do that?</p>
  
  <p>I have created a fiddle just to enlighten you with my question.</p>
  
  <p>Hope someone can help me for any advice.</p>
  
  <p>Thanks a bunch!</p>