SecurityError when calling getImageData on canvas with filter applied

Question

I'm trying to generate a falloff texture for noise generation, in order to achieve that I need to produce a smooth gradient for an arbitrary drawn shape. I'm doing it using gaussian blur in html5 canvas. For some reason after applying the filter, even if I remove it later, when I'm trying to getImageData I'm getting SecurityError. Now I'm aware of what it means, but it beats me why on earth it gets thrown here, as image is generated on the fly and there's nothing cross-origin here. Also for some reason, it only happens of Firefox, while it works perfectly on Chrome.

So yeah, WTH?

See the example below.

var canvas = document.createElement("CANVAS");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 1024, 1024);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 1024, 1024);

ctx.filter = "blur(20px)";
ctx.fillStyle = "white";
ctx.fillRect(30, 30, 200, 100);
ctx.filter = "none";

var img = ctx.getImageData(0, 0, 200, 200);
for(var i = 0; i < img.data.length; i+=4)
 img.data[i] = 255;
ctx.putImageData(img, 0,0);