title: Javascript - apply filters to canvas and reset to original
body: <p>I have a canvas on the page, I draw an image into it, now I would like to apply filters like brightness, contrast, sepia etc...</p>
  <p>The problem comes when a user chooses filters, cause the user needs to be able to select and un-select filters.</p>
  <p>So if for example, the user chooses sepia and contrast filter, I will apply both filters to the canvas, but if he un-select sepia I need to remove the sepia filter from the canvas (kind reset filters and apply only contrast)... and so on for all the available filters.</p>
  <p>How can I achieve this?</p>
  <p>Is there some easy way?</p>
  <p>What I tried is quite awful at the moment:</p>
  <pre><code>function applyFilter(filter) {
      
   var canvas = document.getElementById('canvas')
    , context = canvas.getContext('2d'); 
        
    if (filter === 'sepia') {
      
     context.sepia(1);
    }
      
    if (filter === 'contrast') {
      
     context.contrast(1.3);
    }
      
  }
  function removeFilter(filter) {
      
   var canvas = document.getElementById('canvas')
    , context = canvas.getContext('2d'); 
        
    if (filter === 'sepia') {
      
     context.sepia(0);
    }
      
    if (filter === 'contrast') {
      
     context.contrast(1);
    }
      
  }
  </code></pre>