title: HTML5 Canvas brightness control
body: <p>I wanted to implement a slider control that changes the brightness of the image, much like the one shown at this link but through Html5 canvas :</p>
  
  <p><a href="http://camanjs.com/examples/" rel="noreferrer">http://camanjs.com/examples/</a></p>
  
  <p>I want to control brightness of image by using input slider on html and define on javascript.</p>
  
  <p>any idea how is possible to change the Brightness of this image with javascript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Dispatch a change event to file input element.
  $(document).ready(function() {
      $('#imgfile').change(function(e) {
          var file = e.target.files[0],
              imageType = /image.*/;
  
          if (!file.type.match(imageType))
              return;
  // Get the uploaded file from the event handler and get a data URL by using the FileReader object.
          var reader = new FileReader();
          reader.onload = fileOnload;
          reader.readAsDataURL(file);
      });
  
  // Use some jQuery to trigger click on canvas to input
      $('#canvas').on('click', function() {
          $('#imgfile').trigger('click');
          //show the slider after click to choose the image
          $('#slider').show();
      });
  
  
  // Make an img element with the data URL and draw it on the canvas.
      function fileOnload(e) {
        //Like this in javascript make an image
       // img = new Image();
       //img.onload = imageLoaded;
          var $img = $('&lt;img&gt;', { src: e.target.result });
          $img.load(function() {
              var canvas = $('#canvas')[0];
              var context = canvas.getContext('2d');
              context.drawImage(this, 0, 0, canvas.width, canvas.height );
          });
      }
  
  
  
      var slider = $('#slider').change(function(){
          console.log(this.value);
      })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    text-align: center;
    width: 100%;
  
  }
  
  canvas {
    border: 1px solid black;
    margin: 50px auto;
  }
  
  .container {
    margin: 0 auto;
  }
  
  @media(max-width:1200px) {
    .container {
    margin: 0 50px;
    }
    #canvas {
    width: 100%;
    height: auto;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="js/main.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;title&gt;Brightness-Adjustment&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;canvas id="canvas" width="600" height="384"&gt;
      &lt;!-- &lt;img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="150" height="150" alt=""/&gt; --&gt;
    &lt;/canvas&gt;
  
      &lt;form action='#' onsubmit="return false;"&gt;
        &lt;input type='file' id='imgfile' style="display: none;"/&gt;
        &lt;input id="slider" type="range" min="-1" max="1" step="0.05" value="0" style="display: none;"&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>