filter cssで編集した画像を編集したままの状態でダウンロードしたい

var can = $("#drawarea")[0];
var context = can.getContext("2d");

$("#select").on("change", function() {
  var fileList = this.files;
  if (1 > fileList.length) {
    return false;
  }
  var file = fileList[0];
  var fr = new FileReader();
  fr.onload = function() {

    var image = new Image();

    image.onload = function() {

      if (can.getContext) {

        var context = can.getContext("2d");

        var width = this.width;
        var height = this.height;

        can.width = 600;
        can.height = 315;

        context.drawImage(this, 0, 0, width, height, 0, 0, 600, 315);

      }

    }

    image.src = this.result;

  }

  //ファイルを[base64エンコード]として読み込む
  fr.readAsDataURL(file);
});


$("#save").on("click", function() {
  var img = $('<img>').attr({
    width: 300,
    height: 150,
    src: can.toDataURL()
  });

  var link = $("<a>").attr({
    href: can.toDataURL().replace("image/png", "application/octet-stream"),
    download: new Date().getTime() + ".png"

  });



  $("#gallery").append(link.append(img.addClass("thumbnail")));
  context.clearRect(0, 0, can.width, can.height);
});



$("#eureka").on("click", function() {
  can.setAttribute("data-filter", "Eureka");
})

.rightbar {
  width: 300px;
  height: 700px;
  float: right;
  border: solid 5px black;
}
#drawarea {
  cursor: crosshair;
}
[data-filter] {
  transition: -webkit-filter .2s;
}
[data-filter="Eureka"] {
  -webkit-filter: brightness(160%) contrast(110%) grayscale(0%) hue-rotate(0deg) invert(10%) saturate(90%) sepia(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <button id="save">save</button>
  <input type="file" id="select">
</p>
<p>
  <canvas id="drawarea" width="500" height="300" style="border:1px solid black;"></canvas>
</p>
<button id="eureka" data-filter="Eureka">エウレカボタン</button>


<div class="rightbar">
  <div id="gallery"></div>
</div>

base64として取得してるから編集された状態でsave出来ないのかなと思っているのですが、
filter cssで編集したまま保存する方法が分かりません。

よろしくお願いします。