title: How to save image from canvas with CSS filters
body: <p>I need to save an image after using CSS filters on the client-side (<strong>without</strong> using a backend). What I have so far: </p>
  
  <ol>
  <li>Use CSS filters</li>
  <li>Convert to canvas</li>
  <li>Save with <code>var data = myCanvas.toDataURL("image/png");</code></li>
  <li>Crying. Image was saved without effects.</li>
  </ol>
  
  <h2>Index.html</h2>
  
  <pre><code>&lt;div class="large-7 left"&gt;
      &lt;img id="image1" src="./img/lusy-portret-ochki-makiyazh.jpg"/&gt;&lt;br&gt;
      &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Photo.js</h2>
  
  <pre><code>var buttonSave = function() {
      var myCanvas = document.getElementById("myCanvas");
      var img = document.getElementById('image1');
      var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null; 
      ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
          var grayValue = localStorage.getItem('grayValue');
          var blurValue = localStorage.getItem('blurValue');
          var brightnessValue = localStorage.getItem('brightnessValue');
          var saturateValue = localStorage.getItem('saturateValue');
          var contrastValue = localStorage.getItem('contrastValue');
          var sepiaValue = localStorage.getItem('sepiaValue');
  
          filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
          $('#myCanvas')
            .css('filter',filterVal)
            .css('webkitFilter',filterVal)
            .css('mozFilter',filterVal)
            .css('oFilter',filterVal)
            .css('msFilter',filterVal);
  
      var data = myCanvas.toDataURL("image/png");
      localStorage.setItem("elephant", data);
      if (!window.open(data)) {
          document.location.href = data;
      }
  
  }
  </code></pre>
  
  <p>However, this produces an image without any filters.</p>