Why i+=4? Display Images in Black & White Using the HTML5 Canvas
<p>In <a href="http://www.htmlgoodies.com/html5/javascript/display-images-in-black-and-white-using-the-html5-canvas.html#fbid=UmLFhmgP6e9" rel="nofollow">this acrticle</a>, why in the loop is <code>i</code> incremented by 4 instead of by 1?. I tried changong <code>i+=4</code> to <code>i++</code> but it doesn't work properly. Could you please tell me what is the reason behind?</p>

<pre><code>function grayScale(context, canvas) {
    var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        var pixels  = imgData.data;
        for (var i = 0, n = pixels.length; i &lt; n; i += 4) {
        var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
        pixels[i  ] = grayscale;        // red
        pixels[i+1] = grayscale;        // green
        pixels[i+2] = grayscale;        // blue
        //pixels[i+3]              is alpha
    }
    //redraw the image in black &amp; white
    context.putImageData(imgData, 0, 0);
  }
  //add the function call in the imageObj.onload
  imageObj.onload = function(){
      context.drawImage(imageObj, destX, destY);
      grayScale(context, canvas);
  };
</code></pre>
