CODEWITHSUNDEEP
htmlcanvashtml5-canvasblur
Morten Hjort
Morten Hjort

Reputation: 1012

Canvas Blur background

I'm a newbie regarding canvas and I've searched and tried alot, but never accomplished to find the right solution to use this one: http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

I want to use it with a image for a fixed background, so I can put the same non-blurred image on top, while having a changeable page, that changes design when exchanging the image.

I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox and the performance of such a blurred big image is terrible...

Thanks!

Upvotes: 1

Views: 5683

Answers (1)

KaliedaRik
KaliedaRik

Reputation: 378

"I know I'm able to use CSS3 Filters for this but it doesnt work on Firefox ..."

Firefox can do CSS blurring:

First, include an SVG file containing the desired blur in the web page

<svg xmlns:svg="http://www.w3.org/2000/svg">
    <filter id="gaussian">
        <feGaussianBlur id="myBlur" stdDeviation="5" />
    </filter>
</svg>

Next, get a reference to the canvas element in the normal way, eg:

var canvas = document.getElementById('myCanvas');

... and apply the filter to it:

canvas.style.webkitFilter = 'url(#gaussian)';
canvas.style.filter = 'url(#gaussian)';

To change the blur value, you need a handle to the gaussian blur element itself:

var blurFilter = document.getElementById('myBlur');

Use the setStdDeviation(stdDeviationX, stdDeviationY) method to change the blur. Both arguments are numbers, not strings:

blurFilter.setStdDeviation(5, 5);

(Seems to work OK in latest versions of Firefox and Chrome - though Chrome doesn't like it when the blur values are set to 0 ...)

Upvotes: 1

Related Questions