title: HTML5 change the RGB values of an image
body: <p>I'm new to image manipulation with HTML5. I need some help to change the RGB values of an image to create different effects. Around the web I didn't find any straight forward tutorial about it. I've put together a bit of code to start with taken here and there on the web:</p>
  
  <pre><code> window.onload = function(){
       var imageObj = new Image();
       imageObj.onload = function(){
           drawImage(this);
       };
       imageObj.src = "images/test.jpg";
   };
  
   function drawImage(imageObj){
        var canvas = document.getElementById("mau");
        var context = canvas.getContext("2d");
  
        var destX = 1;
        var destY = 1;
  
        context.drawImage(imageObj, destX, destY);
  
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;
  
        for (var i = 0; i &lt; data.length; i += 4) {
            var red = data[i]; // red
            var green = data[i + 1]; // green
            var blue = data[i + 2]; // blue
            // i+3 is alpha (the fourth element)
        }
  
        // overwrite original image
        context.putImageData(imageData, 0, 0);
   }
  </code></pre>
  
  <p>At this stage the image is shown with no variation. How do I change the 3 variables R, G, B in order to enhance the blue channel for instance? And can someone please run me through the code to understand it better?</p>
  
  <p>Thanks in advance
  Mauro</p>