Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

solarise_webdev's profile picture

Robin

3,986 subscribers

24,742 Aufrufe • vor 2 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.
0:26

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

114,445 Aufrufe • vor 2 Monaten

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs
0:37

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

Steren

733,844 Aufrufe • vor 24 Tagen

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.
0:32

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,432 Aufrufe • vor 2 Monaten

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen
0:23

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

51,990 Aufrufe • vor 2 Monaten

My Google IO demo of HTML in Canvas and Web MCP
2:16

My Google IO demo of HTML in Canvas and Web MCP

Paul Kinlan

13,239 Aufrufe • vor 22 Tagen

Quest Browser 146.o now ships with experimental support for WebGPU in #WebXR. Turn on "webXR experimental features" in "chrome://flags" and the API will be available. Feedback welcome!
0:34

Quest Browser 146.o now ships with experimental support for WebGPU in #WebXR. Turn on "webXR experimental features" in "chrome://flags" and the API will be available. Feedback welcome!

@[email protected]

17,937 Aufrufe • vor 1 Monat

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨
2:08

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

40,747 Aufrufe • vor 6 Tagen

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!
0:24

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!

Jake Archibald

117,256 Aufrufe • vor 2 Monaten

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment
2:46

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment

deep

17,616 Aufrufe • vor 4 Monaten

I just released a handy little chrome extension 'clipmd' that lets you click on any element in a web page, and puts in the clipboard that element converted to markdown (ctrl-shift-m), or a screenshot of it (ctrl-shift-s). Handy for LLMs! 😊
0:22

I just released a handy little chrome extension 'clipmd' that lets you click on any element in a web page, and puts in the clipboard that element converted to markdown (ctrl-shift-m), or a screenshot of it (ctrl-shift-s). Handy for LLMs! 😊

Jeremy Howard

88,028 Aufrufe • vor 6 Monaten

The new o1 canvas is quite impressive: "create an interactive tool that visually shows me how correlation works, and why correlation alone is not a great descriptor of the underlying data in many cases. make it accessible to nonmath people and highly interactive and engaging"
1:24

The new o1 canvas is quite impressive: "create an interactive tool that visually shows me how correlation works, and why correlation alone is not a great descriptor of the underlying data in many cases. make it accessible to nonmath people and highly interactive and engaging"

Ethan Mollick

137,256 Aufrufe • vor 1 Jahr

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯
0:29

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Adam Argyle

456,917 Aufrufe • vor 3 Jahren

BREAKING 🚨: Early preview of Dynamic View on Gemini. Dynamic View (Creative Canvas) will let users render interactive canvas experiences inline within a Gemini Chat. What it can do: - Search the web - Generate Images - Render Games and more! Magic box 🤖
0:26

BREAKING 🚨: Early preview of Dynamic View on Gemini. Dynamic View (Creative Canvas) will let users render interactive canvas experiences inline within a Gemini Chat. What it can do: - Search the web - Generate Images - Render Games and more! Magic box 🤖

TestingCatalog News 🗞

134,703 Aufrufe • vor 7 Monaten

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.
0:43

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

680,654 Aufrufe • vor 2 Jahren

Now Chrome is even better with major updates to Gemini in Chrome. Easier to use. More personalized. And more helpful than ever, with Gemini 3. 🎢 Available in the U.S., auto browse for Google AI Pro and Ultra subscribers.
1:14

Now Chrome is even better with major updates to Gemini in Chrome. Easier to use. More personalized. And more helpful than ever, with Gemini 3. 🎢 Available in the U.S., auto browse for Google AI Pro and Ultra subscribers.

Chrome

21,137,173 Aufrufe • vor 4 Monaten

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting
1:54

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting

Bramus

40,932 Aufrufe • vor 2 Jahren

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level
0:26

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

HeyGen

501,788 Aufrufe • vor 1 Monat

I design: - Websites (WordPress & HTML) - User Interfaces/ User Experiences - Graphics (Flyers, Logos.. Etc) I also run social media marketing, create content calenders, run adverts on Facebook and Instagram and train teams on SMM.
0:44

I design: - Websites (WordPress & HTML) - User Interfaces/ User Experiences - Graphics (Flyers, Logos.. Etc) I also run social media marketing, create content calenders, run adverts on Facebook and Instagram and train teams on SMM.

Gabriel Eikwu

11,872 Aufrufe • vor 2 Jahren

Introducing Slashspace✨ A canvas first agentic harness for power AI users. We are trying to replace all UIs with one interface for the AI era. For the past 18 months i've been building this and it's finally taking shape towards being the ultimate AI interface for a power AI user. We iterated on the canvas experience many times. Started as RabbitHoles AI with node based conversations. Slashspace is now evolving towards canvas-as-context app - The nodes are all agentic, and you don't need to draw connections and do the manual work. Today we're launching on Product Hunt 😸, and your support will mean a lot! As a solo bootstrapped founder, I've invested a lot into this product, so please show some love! 👀 Some feature highlights • Canvas with multi model, multi modal chats. • Local storage with all canvases stored in your folder system • Agentic nodes that can see all the context on the canvas. • Connect to Cursor sdk and use the cursor's harness locally, but chat on the canvas • Access to all the Composio supported tools on the canvas. s/o KP for hunting our PH launch. s/o to Tibo, Tony Dinh, David & HRG gang for forcing the clarity out of me on repositioning the product
1:11

Introducing Slashspace✨ A canvas first agentic harness for power AI users. We are trying to replace all UIs with one interface for the AI era. For the past 18 months i've been building this and it's finally taking shape towards being the ultimate AI interface for a power AI user. We iterated on the canvas experience many times. Started as RabbitHoles AI with node based conversations. Slashspace is now evolving towards canvas-as-context app - The nodes are all agentic, and you don't need to draw connections and do the manual work. Today we're launching on Product Hunt 😸, and your support will mean a lot! As a solo bootstrapped founder, I've invested a lot into this product, so please show some love! 👀 Some feature highlights • Canvas with multi model, multi modal chats. • Local storage with all canvases stored in your folder system • Agentic nodes that can see all the context on the canvas. • Connect to Cursor sdk and use the cursor's harness locally, but chat on the canvas • Access to all the Composio supported tools on the canvas. s/o KP for hunting our PH launch. s/o to Tibo, Tony Dinh, David & HRG gang for forcing the clarity out of me on repositioning the product

Praneeth Pike

44,277 Aufrufe • vor 8 Tagen