title: html5 - how to do the brightness, contrast, saturation, hue up and down?
body: <p>How can i apply the brightness up and down instead of grey? 
  I have been trying but i was only able to get it into grey.</p>
  
  <p>My goal was to make it brightness up and down.</p>
  
  <p>Current code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Effects Brightness&lt;/h1&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td style="vertical-align:text-top;"&gt;
        &lt;h2&gt;BEFORE effect&lt;/h2&gt;      
        &lt;img id="cvs-src" src="/images/a.jpg" width=640 height=480/&gt; 
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;h2&gt;AFTER effect&lt;/h2&gt;
        &lt;canvas width=1024 height=768&gt;&lt;/canvas&gt; 
      &lt;/td&gt;    
    &lt;/tr&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function() {
    window.onload = greyImages;
  
    function greyImages() {
      var img = document.getElementById("cvs-src");
      var imageData; 
      var px; 
      var length; 
      var i = 0; 
      var grey;
  
      var can = document.getElementsByTagName("canvas")[0].getContext('2d');    
      can.drawImage(img, 0, 0);
      imageData = can.getImageData(0, 0, 1024, 768);
      px = imageData.data;
      length = px.length;
  
      for ( ; i &lt; length; i+= 4 ) {
        grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
        px[i] = px[i+1] = px[i+2] = grey;
        grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
        px[i] = px[i+1] = px[i+2] = grey;
        grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
        px[i] = px[i+1] = px[i+2] = grey;    
      }
  
      can.putImageData(imageData, 0, 0);      
    }
  })();
  </code></pre>
  
  <p><strong>EDIT: copy and paste it</strong></p>
  
  <pre><code>&lt;script&gt; 
  function greyImages() {
    var img = document.getElementById("cvs-src");
    var imageData; 
    var px; 
    var length; 
    var i = 0; 
    var grey;
    var can = document.getElementsByTagName("canvas")[0].getContext('2d');    
    can.drawImage(img, 0, 0);
    imageData = can.getImageData(0, 0, 1024, 768);
    px = imageData.data;
    length = px.length;
    for ( ; i &lt; length; i+= 4 ) {
      grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
      px[i] =  grey;     
    }
    can.putImageData(imageData, 0, 0);        
  }  
  
  &lt;/script&gt; 
  
  &lt;h1&gt;Effects&lt;/h1&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td style="vertical-align:text-top;"&gt;
        &lt;h2&gt;BEFORE effect&lt;/h2&gt;      
        &lt;button id="take" onclick="greyImages();" /&gt;
  Download: http://people.opera.com/shwetankd/webm/sunflower.webm
  
        &lt;video id="cvs-src" autoplay="autoplay" src="/images/1.webm"  
               type="video/webm" width=640 height=480&gt;&lt;/video&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;h2&gt;AFTER effect&lt;/h2&gt;
        &lt;canvas width=1024 height=768&gt;&lt;/canvas&gt; 
      &lt;/td&gt;    
    &lt;/tr&gt; 
  &lt;/table&gt;
  </code></pre>