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: (needs Chrome Canary with the canvas-draw-element flag. Source:

Of course, this means you can add shaders (again, Chrome Canary with canvas-draw-element flag)

Could make for a cool CRT style window effect

😁

Ope lol

The obvious next move is to put another canvas element within that HTML?

You joke, but I already do this. In the videos I make, the frames of the video of me are pulled out using the VideoDecoder API and written to an inner canvas.

Nice, I've been playing around with this a little too in my spare time. I've noticed/reported an unfortunate quality difference between content within a canvas vs. a DOM overlay. Have you run into that as well?

Ohhh is it a resolution issue? I haven't experienced that in 2d canvas when creating my dev video things, but I've been running an old Chromium build since a bunch of stuff has broken since then and I haven't had time to investigate it.

I don't think so -- it's something I've noticed in most HTML in canvas demos, like a slight 1px blur but I can't unsee it.

That's awesome. I didn't even know HTML in canvas is a thing. woa

Well, it isn't yet. This is an API in progress, in Canary, behind a flag.

Ok, then I'm one of the first, that's great, thanks.

What is html-in-canvas API??? 😵 I need it!

it's experimental, and the prototype is only in Chrome Canary behind a flag

Really happy for that! Il will unlock a lot of things 💣

Was literally just looking into how one would go about making a pixelated website. This is the exact API I was looking for

Is there anything like a measureText() API with it that would make the new pretext library redundant on Chrome?

It's been in all browser engines over a decade That pretext library uses it.

I’m asking about something else – measureText() only handles ctx.font, and not line wrapping, etc., right? So does HTML-in-canvas offer anything more powerful on that front? Or do you still have to wait for the next animation frame, meaning it’s no better than HTML ex-canvas?

I mean, does HTML-in-canvas give any way to synchronously get the metrics of wrapping text, without having to wait for the next animation frame?

You can already do this in HTML. You don't need to wait until the next frame to call getBoundingClientRect etc etc. It will give you current data. You should avoid interleaving layout reads & writes of course, because that's a slow path. You can always use an iframe.

Yeah, but getBoundingClientRect() forces a layout flush, doesn’t it? Or is that what you are referring to with the slow path? Iframe, huh… 🤔 I wonder if any prior art has explored that.

Right, getBoundingClientRect will force a layout _if_ layout is stale. Otherwise it won't. But, measureText is performing layout work too, that's how it works. The key is to avoid interleaving layout reads & writes, or isolate their impact.

I am personally very excited about this. Like Christmas excited.

@itseieio you might like this!

Finally can take screenshots in the browser

Woah! What an incredible tool this could be 😱

html-in-canvas smells an awful lot like another sneaky way to force ads on the user agent.

How?

Canvas-based rendering moves the web toward a "black box" model where the publisher has control over what is displayed and tracked, and the user agent has very little. Blocking moves from element- to pixel-based. See also: canvas fingerprinting.

does that mean I can wrap my whole website into an canvas using canvas html and then create a video stream based on that canvas using the canvas as a context? Thats interesting. That means I can literally build a remote controllable and viewable website using Jitsi :D

You can definitely record the canvas content to video. That's how I make these:

Haven't peeked behind the scenes at this, but the html page transformations reminded me of the new renderings available on xkcd...

cool, but need also webkit support to spend time on it

this will always be peak:

Put it on a sphere, then I'm interested

Sorry again, but I didn't get how this feature helps with your video creation? Are you using css to do animation (above) and somehow coordinate timing wtih rendering of video, video drives animation?

Yep, it means I can use web tech to do things like syntax highlighting, and web animations for animations. It also means my demos of things like CSS shape() can be 'live' demos. I'm sure someone can do all this in a video editor, but the web is what I know best.

Nice stuff Thanks! I'll take a look at this. Ironically you made me install Chrome Canary lol

Haha I won't show my boss this

Yooo

So other than just being able to do this, what purpose does it have?

It's warping the DOM inputs to match?

Nah, I just apply a simple x/y translate on the element so the bit under the pointer is correct

@TheRealKoolala Does that mean you could have an iOS Glass style of button ("element") where the text and pointer deform with diffraction effects?

@TheRealKoolala Yep!

Does this mean that i can render half of my html normally and one or more portions of my html using canvas(perf intensive)?? This is awesome. Do you see any perf gains when rendering in canvas vs html ?

Rendering HTML in a canvas will be slower than rendering it normally, as the browser can't make particular optimisations

Wow, this is totally opposit from what i was assuming, can you also share an example of an optimization?

Not rendering things out of view, rendering only changed parts, optimising texture size

Thanks for this information.

super cool

Canvas being canvas