Change PNG Color using Javascript/jQuery and CSS

Question

I have a black heart PNG image I want to display with different color. How can I change the color of the heart using javascript/css/jquery?

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

SOLUTION UPDATE:

The solution was to use canvas. Found my solution here. Here's the code:

<h4>Original Image</h4>
<img id="testImage" src='black-heart.png'/>

<h4>Image copied to canvas</h4>
<canvas id="canvas" width="128" height="128"></canvas>

<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>



<script>
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 <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"); 
</script>

Answer 1

Trick 1

Have multiple images already created (using photo editing software such as Gimp or Photoshop) and simplly change the image source using jQuery.

Trick 2

Another option is to have a PNG with transparent heart-shapped hole in it and change the background colour using jQuery.