html5 - Canvas Blur background -

I am a newbie about canvas and I have searched and tried a lot, but right to use it The solution did not get it one:

I want to use it with an image for a certain background, so I can put the same non-blurred image on top, while having a variable page , Which changes the design while exchanging images.

I know that I am using the CSS3 filter for this, but it does not work on Firefox and the display of such a blurry big image is awesome ...

Thanks !

"I know that I use the CSS3 filter for this But it does not work on Firefox. "

Firefox can blur css:

First of all, include a SVG file that includes web The page has the desired blurring

  & lt; Svg xmlns: svg = "http://www.w3.org/2000/svg" & gt; & Lt; Filter id = "gaussian" & gt; & Lt; FeGaussianBlur id = "myBlur" stdDeviation = "5" /> & Lt; / Filter & gt; & Lt; / Svg & gt;   
 Next, get the context of the canvas element in general, such as:  
  var canvas = document.getElementById ('myCanvas');   
 ... and apply filter to:  
  canvas.style.webkitFilter = 'url (#gaussian)'; Canvas.style.filter = 'url (#gaussian)';   
 To change the value of the stigma, you must handle the Gaussian Blur alignment only:  
  var blurFilter = document.getElementById ('myBlur') ;   
 Use setStdDeviation (stdDeviationX, stdDeviationY) method to change color. There are two logic numbers, no wires:  
  blurFilter.setStdDeviation (5, 5);   
 (seems to work fine in the latest version of Firefox and Chrome - however, when the blur values ​​are set to 0 then Chrome does not like it ...)