title: HTML5 Canvas: Change Image Color
body: <p>I have an image(in greyscale form) of which i want to change the color(user specific). Since its quite difficult to change the color of a greyscale image, i come with an approach.</p>
  
  <p>Image is divided into two parts.</p>
  
  <ol>
  <li>One is the image with white color.</li>
  <li>Second, a semi transparent image with grayscale.</li>
  </ol>
  
  <p>Now, i place both image on top of each other(with white image on below and greyscale image on top) such that when i change the color of white image, it will be visible to user.</p>
  
  <p><strong>Problem: This approach works for me, except one issue. When i color the white image, it will pixellete from corners.</strong></p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/pandey_mohit/BeSwL/" rel="noreferrer">http://jsfiddle.net/pandey_mohit/BeSwL/</a>  </p>
  
  <p>JSFiddle contains three images for capsules:</p>
  
  <ol>
  <li>Top Capsule Part White Image (for coloring)</li>
  <li>Bottom Capsule Part White Image (for coloring)</li>
  <li>Semi Transparent Image for 3D effect (using grayscale)</li>
  </ol>
  
  <p>Select red, green or blue color to see the issue.</p>
  
  <pre><code>function hexToRgb(color) {
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      color = color.replace(shorthandRegex, function(m, r, g, b) {
          return r + r + g + g + b + b;
      });
  
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
      return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
      } : {
          r: 0,
          g: 0,
          b: 0
      };
  }
  
  function colorImage(imgId,hexaColor) {
      // create hidden canvas (using image dimensions)
      var imgElement = document.getElementById(imgId);
  
      var canvas = document.createElement("canvas");
      canvas.width = imgElement.width;
      canvas.height = imgElement.height;
  
      var ctx = canvas.getContext("2d");
      ctx.drawImage(imgElement,0,0);
  
      var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
  
      var data = imageData.data;
  
      // convert image to grayscale
      var rgbColor = hexToRgb(hexaColor);
  
      for(var p = 0, len = data.length; p &lt; len; p+=4) {
          if(data[p+3] == 0)
             continue;
          data[p + 0] = rgbColor.r;
          data[p + 1] = rgbColor.g;
          data[p + 2] = rgbColor.b;
          data[p + 3] = 255;
      }
      ctx.putImageData(imageData, 0, 0);
  
      // replace image source with canvas data
      imgElement.src = canvas.toDataURL();
  }
  
  // changing color of capsule on select event
  document.getElementById('sel_top').onchange = function(){
      colorImage('img_top', this.value);
  }
  document.getElementById('sel_bottom').onchange = function(){
      colorImage('img_bottom', this.value);
  }
  </code></pre>