title: Want to create a simple image brightness control slider
body: <p>I wanted to implement a slider control that changes the brightness of the image, much like the one shown at this link : </p>
  
  <p><a href="http://camanjs.com/examples/" rel="nofollow">http://camanjs.com/examples/</a></p>
  
  <p>I am fairly new to javascript and this is proving to be rather difficult. So right now, I am using the CamanJS library but unfortunately am not able to replicate that. I tried reverse engineering the example, but gosh the example is very complicated and not at all readable! Anyways, heres the problem with my implementation : </p>
  
  <pre><code>//this is the event handler called when the slider value changes
  function brightnessControl(e, ui) {
    //mainImage is the id of the canvas that holds the image
    Caman("#mainImage", function() {
      this.brightness(ui.value);
      this.render();
    });
  }
  </code></pre>
  
  <p>the original image is overwritten with a new image with the brightness settings. So eventually, I end up with just a plain white or black image. Any help would be greatly appreciated! Thanks in advance!</p>