How HTML-in-Canvas Actually Works #coding #programming #javascript

All right, I'm definitely like a week late, but I finally got a chance to play with this new HTML and Canvas API. I don't know if you guys have the same type of timeline that I have, but I've been seeing nothing but posts on cool stuff people have been making with this for the last week or so. If you guys haven't actually seen this, this is a new kind of bleeding edge feature inside of Chrome. You can toggle it on by going into your Chrome flags and then looking for HTML and Canvas. And this actually lets you take HTML and kind of like it says on the tin, embed it as like a texture inside of a Canvas element. So you can either just paint it as like the whole web page or you can even do fancy stuff like this where I have literally an HTML form, which I then embed as a texture. It remains all of the good accessibility things, all the good stuff that you come to expect with normal HTML, but lets you do other really creative things. So we can start by looking at like the most basic possible example of just like putting, you know, a rectangle with some text into a Canvas. Code for that looks something like this. So I have, you know, all of my normal styles and stuff. I'm styling my div down here, this idea of card, to look, you know, like this. But you'll see that I'm actually rendering that inside of a Canvas with this new property called layout subtree. If I remove this, it'll stop working. So you see now it doesn't work anymore. But by default, just this layout subtree on its own also doesn't make this work. I have to take this HTML and, you know, choose what I want to do with it inside of the Canvas. I'm grabbing my card. I'm grabbing, you know, my 2D context for my actual Canvas. And then there's this new argument that you can pass to add event listener called paint, which calls, from what I understand, anytime something kind of changes inside of the HTML that needs to be reflected inside of the Canvas. And then we can actually just take that card and draw it. So this is, remember, just an element from up here. This is just like a query selected element that I'm then painting directly into the Canvas at some position. So this is like the most simple possible example of just literally drawing it in. But you can even take it and like use it as a texture on some piece of geometry. So if I look over at this other example, I am taking some HTML and I'm adding it to like this waving flag effect. You're going to see a lot of this looks pretty similar. I have my Canvas with layout subtree. I have a div inside of that. But in this case, I'm grabbing a WebGL context. I definitely just had a Codex tell me actually write up these shaders. This is a fair ways out of my wheelhouse. We're building all of this code. Essentially, he's building up the actual geometry that makes up this flag, which I'm then painting the texture onto. Yeah, down here to my draw, I can comment this out. We'll see that now if I comment out the actual the painting of the texture onto this geometry, we just now have the black geometry kind of like a the no lighting, no shading geometry on our Canvas. And what I'm actually doing is I'm taking my flag element and I'm painting that as a texture onto or onto that geometry. This allows you then to do things like this example we looked at here a second ago where I have a full 3D screen, right? Like this little person is an HTML. The whole scene isn't HTML. Just what is sitting inside of kind of this fabric that's hanging down. That part is HTML that is being selectively targeted and then painted onto.