This could have a great utility, but for me HTML in canvas in HTML feels so cursed.
To make it make sense in my opinion canvas should already be a first class format for web browsers, so it doesn't have to be inside a HTML.
Then we would have a choice of HTML-first page with canvas elements in it, or a canvas-first page with HTML elements in it.
But what do I know.
Liron · 50m ago
What if you want an HTML-first page with a canvas in it, but then you realize you want some layout/styling for the text within the canvas? Seems unnecessary to propagate that situation up to the type of top-level page.
thrance · 3m ago
And then what if you realize you need a canvas-in-the-html-in-the-canvas? It's endless. Canvas-first makes sense, it's basically how it works everywhere outside of the web. Start with the smallest abstractions and build on them (html on canvas) rather than leave escape hatches to your big abstractions because they fail to cover every use cases (canvas in html).
socalgal2 · 45m ago
canvas first sites suck. They can't use any system services as it would all be a privacy issue. They can't use the system dictionary for correction since to do so they'd need the contents of the dictionary or at least a way to query user customized corrections. Similarly they can't offer the system level accessibility but end up having to roll their own in which case, every app that uses canvas has a completely different UI.
nemomarx · 17m ago
That's basically how flash sites worked, and those were pretty common?
desiderantes · 47s ago
They said that those kind of sites sucked. Common or not.
SeanAnderson · 2h ago
I read the title and said "shut the fuck up, don't do that." but then I read the rationale and it's fair. It's true there is no layout engine inside canvas, and that is a pain, but I'm not sure it's such a pain as to invite this recursive hell.
nine_k · 1h ago
One of the more senior engineers I worked with told me: "Every real-life data structure I encountered was tree-like".
It would be easiest to just ask the browser to render a fragment of HTML onto a canvas, or onto some invisible bitmap, like you can with most other UI toolkits.
monster_truck · 1h ago
They would never do this because of fingerprinting, which is already the cause of most of the reasons we cannot 'just' do a lot of things, unfortunately.
E: And the infamous other half: malware. A bit over a decade ago malware devs started using canvas to do things like hide fragments inside of bitmap data in seemingly harmless ads and then a second script would extract and assemble it to evade detection.
mook · 1h ago
Yeah, that's already available in Firefox for chrome/extensions, but not allowed for the web due to fingerprinting and other security risks. For example, rendering an iframe of your bank account…
> Every real-life data structure I encountered was tree-like
I don't understand what the takeaway is here. Is that surprising? Is it not? What does "real-life" mean?
do_not_redeem · 41m ago
> Every real-life data structure I encountered was tree-like
What does this even mean? Is a hash map "tree-like" somehow? Or is a hash map just a toy data structure with no real-life use cases?
UltraSane · 15m ago
Nested hash maps are trees
teaearlgraycold · 1h ago
You could disallow recursion.
reactordev · 14m ago
I support this, as odd as it is. There’s times when you’re needing something drawn but can easily reuse an html element from elsewhere. Previously you’d have to render that to a bitmap offscreen and then copy that to a full screen quad or draw it on the canvas. Up until recently, even if you tried to z-index elements with position absolute it would be visually overwritten by the canvas (I think this is mostly fixed though).
I don’t know if this is the best solution but it’s better than previous hacks. IF you need to go that route. Basically html2canvas.
BobbyTables2 · 1h ago
I suppose all we need to do now is to compile a browser into WASM and run that browser inside a canvas element of the main browser…
There is a real problem using canvas to replace HTML.
Not all but most HTML. I have not found a good solution for the issue of doing something like MDX in canvas. I have tried SDF, looked at 2D canvas Text, Troika, MSDF. You can get text, it is just that laying it out is very difficult. React three drei has the ability to put HTML into the threejs ecosystem, but there are issues about CSS and text that make that impractical.
For me the use case is very simple. I would like to take an MDX file and show it in a mesh. Laid out. Maybe I am missing something because I am new to the whole threejs thing, but I really tried.
This shows it can be done, I gave up trying to reproduce it in React-three-fiber.
Why? Personally, I think the use of 3D graphics produces an interface for users that is an order or magnitude better for users. The real question (and an interesting one to consider) is why are we still building HTML first websites?
nikeee · 21m ago
Is that being made to make Flutter not being like Flash on the web?
ttoinou · 2h ago
Soon we’re gonna need Canvas rendering inside of HTML-in-Canvas
bastawhiz · 1h ago
It should already work if the nested canvas uses the same approach. It's not cyclic, though. To make cyclic canvases work, you need to manually draw the parent canvas to a nested canvas.
45kb gzipped is pretty beefy but incredibly small when you consider just what it takes to make this work today. If I understand correctly, it’s basically a DOM and CSS renderer.
kizer · 2h ago
There's a bunch of CSS, etc. not supported by that. It would be great to have access to a native API to get bitmaps of the DOM.
masswerk · 2h ago
Well, a fingerprinting dream…
Meaning, no way, just for the security aspect.
turnsout · 1h ago
Sad to say, but the first thing I thought was "oh good, a new fingerprinting target."
tinalovely101 · 53m ago
It seems to be impossible with html version.
charcircuit · 1h ago
This sounds really useful for being able to use standard web technology with webxr.
socalgal2 · 41m ago
I've never understood why they couldn't have just used the existing 3D CSS for WebXR. All the data is there, all they need to do is render the DOM from 2 POVs, one for each eye. They could even have had some standard to let it auto composite with WebGL.
deadbabe · 1h ago
true horror is finding every element of the HTML page your on has been rendered in a Canvas
To make it make sense in my opinion canvas should already be a first class format for web browsers, so it doesn't have to be inside a HTML.
Then we would have a choice of HTML-first page with canvas elements in it, or a canvas-first page with HTML elements in it.
But what do I know.
It would be easiest to just ask the browser to render a fragment of HTML onto a canvas, or onto some invisible bitmap, like you can with most other UI toolkits.
E: And the infamous other half: malware. A bit over a decade ago malware devs started using canvas to do things like hide fragments inside of bitmap data in seemingly harmless ads and then a second script would extract and assemble it to evade detection.
https://searchfox.org/mozilla-central/rev/f691af5143ebd97034...
I don't understand what the takeaway is here. Is that surprising? Is it not? What does "real-life" mean?
What does this even mean? Is a hash map "tree-like" somehow? Or is a hash map just a toy data structure with no real-life use cases?
I don’t know if this is the best solution but it’s better than previous hacks. IF you need to go that route. Basically html2canvas.
1. By painting on it using Canvas/Graphics API:
Where _painter_ is a function used for paining on the image surface using Canvas/Graphics reference.2. By making snapshot of the existing DOM element:
Such images can be used in DOM, rendered by other Canvas/Graphics as also in WebGL as textures.See: https://docs.sciter.com/docs/Graphics/Image#constructor
Not all but most HTML. I have not found a good solution for the issue of doing something like MDX in canvas. I have tried SDF, looked at 2D canvas Text, Troika, MSDF. You can get text, it is just that laying it out is very difficult. React three drei has the ability to put HTML into the threejs ecosystem, but there are issues about CSS and text that make that impractical.
For me the use case is very simple. I would like to take an MDX file and show it in a mesh. Laid out. Maybe I am missing something because I am new to the whole threejs thing, but I really tried.
A good article about text https://css-tricks.com/techniques-for-rendering-text-with-we...
And an example from the above article: https://codesandbox.io/p/sandbox/css-tricks-msdf-text-fks8w
This shows it can be done, I gave up trying to reproduce it in React-three-fiber.
Why? Personally, I think the use of 3D graphics produces an interface for users that is an order or magnitude better for users. The real question (and an interesting one to consider) is why are we still building HTML first websites?
> TODO: Expand on fingerprinting risks
Meaning, no way, just for the security aspect.