title: replace specific color and it's shades in canvas
body: <p>I am trying to make web tool that will allow people to replace colors in simple 2 color images that I am selling. Images that I am using are saved in jpg format. I did look here and there and I did come up with following code:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  img = new Image();
  
  img.onload = function() {
   canvas.width = img.width;
   canvas.height = img.height;
   context.drawImage(img,0,0,canvas.width,canvas.height); 
  
   var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
   var pixelArray = imageData.data;
   var length = pixelArray.length / 4; 
  
   for (var i = 0; i &lt; length; i++) {
      var index = 4 * i;
  
      var r = pixelArray[index];
      var g = pixelArray[++index];
      var b = pixelArray[++index];
      var a = pixelArray[++index];
  
      if (r === 0 &amp;&amp; g === 0 &amp;&amp; b === 0 &amp; a === 255) {
          pixelArray[--index] = 47; 
          pixelArray[--index] = 255; 
          pixelArray[--index] = 173; 
      }
   }
  
   context.putImageData(imageData, 0, 0);
  }
  
  img.src = "assets/images/tijana-mala.jpg"; 
  </code></pre>
  
  <p>Unfortunately I came into realization that many of the pixels are not just "black or white" but there are different shades of it. Complexitiy of images is rather simple, I sell quotes: Text on the background, using variety of fonts.</p>
  
  <p>Is there a way to do this beyond my piece of code?</p>
  
  <p>Thank you</p>
  
  <p>P.S. My competition made it there: 
  <a href="http://www.crownprintsart.com/color" rel="nofollow">http://www.crownprintsart.com/color</a>
  username: your email address
  password: crownprintsdemo</p>