Update, backdrop filter is finally here, use it instead of this method or design a polyfil based on this sort of idea.
I have been working for a long time refining a UI technique that I rarely see but the results could be mind blowing, I want to share this with you so hopefully we can get better tools to do this sort of thing.
The idea of using a canvas to generate pretty pictures doesn't appeal to me as much because practically I build UIs for utility. I see another potential for canvas which was inspired by the css element() function, supported exclusively by Firefox for many years.
It is possible to take a client side screenshot of your entire document and apply that to a canvas. Okay so what, big deal?
Note that this will so well on mobile chrome as changing background position is pretty terrible to paint.
Okay so what gives? By layering and manipulating this screenshot it is possible to create all sorts of effects. I have the Mac geenie distort effect in my codepen somewhere (WIP).
So what's the problem? There is no native screenshot API despite existing in headless chrome, so html2canvas needs to be used, that equals more weight, then the experimental canvas filter sort of hasn't worked so in comes stackblur.
Responsiveness is also tricky, in my example I don't want a screenshot taken on every resize, so I have opted for one taken after resize.
So in summary, I'm waiting for CSS backdrop filter or canvas filter and a native screenshot API or video screen capture to take video without having to choose an input. Composit UI might be a fun challenge, go have a play around with it.
Top comments (0)