Blur for Canvas

[nonamedude]

I am trying to achieve a Gaussian blur for a canvas element with moving objects on them. I can't seem to find a way to do this efficiently. Any ideas ? 

[pixelpathos]

I've not encountered anything native on canvas that will allow you to do this.

Does it have to be a true Gaussian blur? I can't claim to know the mathematics behind it, but I do know it's expensive to compute, and would involve manipulating the canvas data on a pixel-by-pixel level - likely too slow for real-time game use.

Depending on the scenario, you might be able to fake it. Is there any way you could use Photoshop (or similar) to pre-render any of the blur, and just use canvas to composite the blurred sprites at runtime?

[hubert]

You can't use filters, tints and blur etc. on spriteBatch. That why it is so fast... that's a trade-off you'll have to make!

 

http://www.sevenative.com

[Rezoner]

Apply CSS filter blur on it. http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS

 

For a game with a very small resolution convolution kernel might work

 

ps: sorry, I have not noticed this is pixi.js related thread - but you might still hack into it to get into raw canvas

[nonamedude]

A css blur does work but it makes the animations really slow on mobile devices. 

 

http://stackoverflow.com/questions/26005999/blur-an-image-before-rending-onto-canvas

 

I am gonna try this solution and see if it's viable

[Alvin]

I have used this blur script before and It's quite fast (for a canvas filter), but if you want to blur you whole game screen for a moment I would suggest using another blurred canvas on top.

[agamemnus]

You can save the animations as blurred?

 

Check this out:

http://www.html5gamedevs.com/topic/9099-bevel-with-pixijs/?p=54073