1

Is there a way to Blur shapes on a HTML5 Canvas? I know you can blur images but can you blur shapes(like drawing a triangle/polygon using context.lineTo();)?

I know you can easily blur elements using SVG elements(where I can also use complex shapes too like a polygon), but as luck would have it Safari doesn't show Filters(what a shadow uses) & I am creating a webapp that is solely for the iPad.

The optimum solution would be a native Javascript HTML5 Canvas solution rather than 3rd party Javascript libraries.

sazr
  • 24,984
  • 66
  • 194
  • 362
  • http://stackoverflow.com/questions/3468038/html-canvas-shape-blur-filter – ToddBFisher Jan 23 '12 at 06:17
  • @ToddBFisher So the only option is 3rd party libraries? No native solution? – sazr Jan 23 '12 at 06:21
  • I haven't messed around with any blur options for svg elements that were not 3rd party, but hopefully someone else here has as I would be interested in that as well. – ToddBFisher Jan 23 '12 at 06:27

1 Answers1

0

The method is to blit your shape onto a buffer context, do a (box)blur on the buffer context and blit the buffer onto the canvas.

tnt-rox
  • 5,400
  • 2
  • 38
  • 52