JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="check" checked><label>toggle the filter</label>
<button id="btn">call toDataURL()</button><br>

JavaScript

var img = new Image();
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
btn.onclick = function(){
	var i = new Image();
	i.src = c.toDataURL();
	document.body.appendChild(i);
	};

img.onload = function(){
	c.width = this.naturalWidth;
	c.height = this.naturalHeight;
	document.body.appendChild(c);
	ctx.filter = 'blur(2px)';
	ctx.drawImage(img, 0,0);
	}
img.crossOrigin = 'anonymous';
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
check.onchange = function(){
	// we need to replace the canvas element since it has been tainted
	var newC = c.cloneNode();
	c.parentNode.replaceChild(newC, c)
	c = newC;
	ctx = c.getContext('2d');
	
	ctx.filter = this.checked ? 'blur(2px)' : 'none';
	ctx.drawImage(img, 0,0);
	}