Skip to content

Instantly share code, notes, and snippets.

@Juribiyan
Created March 9, 2016 09:16
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Juribiyan/b8b98e603b91abd3c4ea to your computer and use it in GitHub Desktop.
Canvas blur using CSS filters and SVG rasterization
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment