title: HTML5 Canvas image contrast
body: <p>I've been writing an image processing program which applies effects through HTML5 canvas pixel processing. I've achieved Thresholding, Vintaging, and ColorGradient pixel manipulations but unbelievably I cannot change the contrast of the image!
  I've tried multiple solutions but I always get too much brightness in the picture and less of a contrast effect <strong>and I'm not planning to use any Javascript libraries since I'm trying to achieve these effects natively.</strong></p>
  
  <p>The basic pixel manipulation code:</p>
  
  <pre><code>var data = imageData.data;
  for (var i = 0; i &lt; data.length; i += 4) {
   //Note: data[i], data[i+1], data[i+2] represent RGB respectively
  data[i] = data[i];
  data[i+1] = data[i+1];
  data[i+2] = data[i+2];
  }
  </code></pre>
  
  <hr>
  
  <h2>Pixel manipulation example</h2>
  
  <p>Values are in RGB mode which means data[i] is the Red color. So if data[i] = data[i] * 2; the brightness will be increased to twice for the Red channel of that pixel. Example:</p>
  
  <pre><code>var data = imageData.data;
  for (var i = 0; i &lt; data.length; i += 4) {
   //Note: data[i], data[i+1], data[i+2] represent RGB respectively
   //Increases brightness of RGB channel by 2
  data[i] = data[i]*2;
  data[i+1] = data[i+1]*2;
  data[i+2] = data[i+2]*2;
  }
  </code></pre>
  
  <p>*<strong>Note: I'm not asking you guys to complete the code! That would just be a favor! I'm asking for an algorithm (even Pseudo code) that shows how Contrast in pixel manipulation is possible!</strong>
  I would be glad if someone can provide a good algorithm for Image Contrast in HTML5 canvas.</p>