| GitHub | https://github.com/jakearchibald |
Nice to see excitement around the proposed html-in-canvas feature, but remember you can already put canvas behind/atop HTML elements.
The benefits of this new feature are:
➡️ Readbacks (eg sending to a VideoEncoder)
➡️ Showing HTML on non-planar shapes
➡️ Using shaders on HTML
I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!
Live demo: https://random-stuff.jakearchibald.com/apps/curved-markup/ (needs Chrome Canary with the canvas-draw-element flag.
Source: https://github.com/jakearchibald/random-stuff/blob/main/apps/curved-markup/src/App/index.tsx#L113
Can you tell CSS from BS? I tried, and it's hard.
Folks asked if there was a way to disable Chrome's own 'back' transitions, and I didn't think there was, but… you can use a CloseWatcher to listen for the back gesture (which disables Chrome's transition), and then call history.back().
Because you can provide arbitrary image data to the encoder for the progressive passes, you're in full control over what those passes look like.
In this example, I've created a pass that's blurred except for the 'focal point' of the image (I'm not sure it's a good effect though).
Live demo: https://random-stuff.jakearchibald.com/apps/partial-img-decode/?demo=cat-3-pass.avif&density=2, although the progressive rendering is Chrome-only right now.
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1712813
The progressive passes work like frames of a video, in that subsequent passes can be inter-frames, reusing data.
Firefox for Web Developers