title: Change PNG Color using Javascript/jQuery and CSS
body: <p>I have a <a href="http://1.bp.blogspot.com/_yq_ZSKg39Tk/TOvzVx9sC5I/AAAAAAAAAb0/GcN4O-Ciq3s/s1600/black-heart.png" rel="noreferrer">black heart PNG image</a> I want to display with different color. How can I change the color of the heart using javascript/css/jquery?</p>
  
  <p>I'm trying to make a shirt designer. So the background is a shirt, and the heart is the print design (among other shapes).</p>
  
  <p>P.S. 
  I know this is already a duplicate but there seem to have no solution that was of help. Hope you guys could help me if ever you have done this already. Thank  you so much!</p>
  
  <p><strong>SOLUTION UPDATE:</strong></p>
  
  <p>The solution was to use canvas. Found my solution <a href="http://jsfiddle.net/loktar/qduSR/1/" rel="noreferrer">here</a>.
  Here's the code:</p>
  
  <pre><code>&lt;h4&gt;Original Image&lt;/h4&gt;
  &lt;img id="testImage" src='black-heart.png'/&gt;
  
  &lt;h4&gt;Image copied to canvas&lt;/h4&gt;
  &lt;canvas id="canvas" width="128" height="128"&gt;&lt;/canvas&gt;
  
  &lt;h4&gt;Modified Image copied to an image tag&lt;/h4&gt;
  &lt;img id="imageData"/&gt;
  
  
  
  &lt;script&gt;
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      image = document.getElementById("testImage");
  
  ctx.drawImage(image,0,0);
  
  var imgd = ctx.getImageData(0, 0, 128, 128),
      pix = imgd.data,
      uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.
  
  // Loops through all of the pixels and modifies the components.
  for (var i = 0, n = pix.length; i &lt;n; i += 4) {
        pix[i] = uniqueColor[0];   // Red component
        pix[i+1] = uniqueColor[1]; // Blue component
        pix[i+2] = uniqueColor[2]; // Green component
        //pix[i+3] is the transparency.
  }
  
  ctx.putImageData(imgd, 0, 0);
  
  
  var savedImageData = document.getElementById("imageData");
  savedImageData.src = canvas.toDataURL("image/png"); 
  &lt;/script&gt;
  </code></pre>