Hacker News Reader

Comment by fitter | Hacker News Reader

Does this need to be a canvas-scribbling React component when you can do this with better performance using a couple of lines of CSS filters?

Is there some advantage I'm missing?

View on HN

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

You can. SVG Filters are supported.

http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-eff...

Edit: to clarify, the image would need to be moved into the SVG (which could be a simple DOM manipulation of the original <img> tag).

Hm, if that's the case, then theoretically this component can be easily improved to support any DOM container (not just images) by just polyfilling filter: with native or SVG.

I dunno about that. <img> has a pretty direct analog in SVG that you could create by adding it (and the SVG container) to the DOM in script. Arbitrary markup would probably be best to render into a canvas.

Of course, you could always just force IE9 mode... ;)

Thank you! I will investigate and compare.

But why write this as a React component, when a plain javascript implementation would do fine (in view of compatibility with existing code, which may not be using React)? Am I missing something?

Yeah, I was also thinking in create a non-react version, but a separate react version would still be needed since we are doing DOM manipulation.

Reply on news.ycombinator.com