Canvas blur using CSS filters and SVG rasterization

onstroke.js

var target = document.querySelector('#target'),
targetContext = target.getContext('2d'),
buffer = document.querySelector('#buffer'),
bufferContext = buffer.getContext('2d'),
height = target.height, width = target.width,
opacity = 1,
radius = 10;

function onStroke() {
  var data = '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450">' +
  '<foreignObject width="'+width+'" height="'+height+'">' +
  '<img xmlns="http://www.w3.org/1999/xhtml" src="'+buffer.toDataURL()+'" style="opacity: '+opacity+'; filter: blur('+radius+'px); -webkit-filter: blur('+radius+'px);"/>'+
  '</foreignObject>' +
  '</svg>';
  var DOMURL = window.URL || window.webkitURL || window;
  var img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  var src = 'data:image/svg+xml;base64,'+window.btoa(data);
  img.onload = function () {
    bufferContext.clearRect(0,0,width,height);
    targetContext.drawImage(img, 0, 0);
  }
  img.src = src;
}