Blur HTML5 Canvas

Question

How can I blur the contents of an HTML5 canvas?

I know that I can use CSS, but I need to blur the contents of the canvas so that I can manipulate it later.

@FelixKling Thank you! I think that I have found just what I needed. Can I mark a comment as the answer? — starbeamrainbowlabs, Feb 07 '13 at 18:25
Your question was closed as a duplicate, so you don't have to. — tckmn, Feb 11 '13 at 02:01

score 4 · Accepted Answer · answered Feb 07 '13 at 13:18

There is no native function to do that. But you can implement your own image filter operations by using context.getImageData to get an array of raw RGBA values of the canvas data, do your filter operation on that data, and then write it back with context.putImageData.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation

Blur HTML5 Canvas

1 Answers1