正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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... show more

Chrome for Developers

424,346 subscribers

41,735 次观看 • 4 个月前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

14 条评论

divøn 的头像

divøn3 个月前

@sarah_edo this take on HTML HTML-in-Canvas canvas is more grounded than most. refreshing to see someone actually dig in

Taegyu Lee 的头像

Taegyu Lee4 个月前

I guess now you can capture Canvas elements?

KoBaGo 的头像

KoBaGo4 个月前

so we can't block ads rendererd in HTML in Canvas

1024.com 的头像

1024.com4 个月前

Cool HTML-in-Canvas!

K!A🚀 的头像

K!A🚀4 个月前

Canvas finally stops being a visual island.

zhowiny 的头像

zhowiny4 个月前

Awesome! 😱

dazzafact 的头像

dazzafact4 个月前

OK, so now you can use canvas like Apps

Nikhil 的头像

Nikhil4 个月前

Nice, It will be good for SEO and debugging in general.

learnbydoingwithsteven数能生智的头像

learnbydoingwithsteven数能生智4 个月前

Making canvas content searchable and accessible could open up richer interfaces without sacrificing browser semantics.

Jintao Zhang 张晋涛的头像

Jintao Zhang 张晋涛4 个月前

Like this HTML in Canvas

Christian Giordano 的头像

Christian Giordano3 个月前

ETA?

Franklin Williams 的头像

Franklin Williams4 个月前

Useful API.

AKCS LLC 的头像

AKCS LLC4 个月前

Oh boy... I was able to create the same webpages I did with @rapidweaver and @blocsapp using Canva. This is a door that will open a lot of possibilities and close a lot of doors as well. Very interesting. Imagine if @weaversspace finds a way to bring stacks and canvas together!

Achuth Hadnoor 🏕️ 的头像

Achuth Hadnoor 🏕️4 个月前

flutter is a success and now web is too 🚀

相关视频

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.

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

115,180 次观看 • 6 个月前

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

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

737,223 次观看 • 4 个月前

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.

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

682,445 次观看 • 2 年前

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.

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,646 次观看 • 5 个月前

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

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,688 次观看 • 8 个月前

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

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

504,156 次观看 • 5 个月前

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

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

𝘼𝙈𝘼𝙂𝙄

52,470 次观看 • 5 个月前

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini

Chrome for Developers

15,970 次观看 • 2 个月前

CODE EXECUTION IN CANVAS🎨 Canvas becomes an automated SWE and a data scientist. Search for API docs, ask the model to write code and execute, get the plot!

CODE EXECUTION IN CANVAS🎨 Canvas becomes an automated SWE and a data scientist. Search for API docs, ask the model to write code and execute, get the plot!

Karina

46,604 次观看 • 1 年前

$Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.$

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

237,768 次观看 • 2 个月前

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Chrome for Developers

18,556 次观看 • 4 个月前

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,605 次观看 • 7 个月前

PixiJS v8.19.0 is out 🎉 HTML-in-Canvas support is live! Time to make the web fun again! Plus lots of fixes and improvements across the engine More in the blog post below

PixiJS v8.19.0 is out 🎉 HTML-in-Canvas support is live! Time to make the web fun again! Plus lots of fixes and improvements across the engine More in the blog post below

PixiJS

14,349 次观看 • 3 个月前

just dropped my first video in a 5 part series where we build a full travel planner app on Replit and i am so excited 🌍✈️ as a software engineer, design has always felt a little out of reach for me. like i had all these ideas in my head but turning them into something that actually looks good was a whole other skill set. but the Replit Canvas genuinely changed that for me. my favourite way to use the Canvas is to bring in reference images and websites to help me to create designs! in this first video we jump into the Canvas, explore design directions for our travel app, and apply a final look to a real working app. it is so fun i promise. go watch it and let me know what you think 🎨👇

just dropped my first video in a 5 part series where we build a full travel planner app on Replit and i am so excited 🌍✈️ as a software engineer, design has always felt a little out of reach for me. like i had all these ideas in my head but turning them into something that actually looks good was a whole other skill set. but the Replit Canvas genuinely changed that for me. my favourite way to use the Canvas is to bring in reference images and websites to help me to create designs! in this first video we jump into the Canvas, explore design directions for our travel app, and apply a final look to a real working app. it is so fun i promise. go watch it and let me know what you think 🎨👇

sarah li

18,757 次观看 • 5 个月前

The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet the new Replit Canvas Your agentic design tool to build beautiful websites, apps, marketing assets and more

The best design work doesn't happen in a chat box. You need space to explore ideas, create variants, and iterate Meet the new Replit Canvas Your agentic design tool to build beautiful websites, apps, marketing assets and more

Replit ⠕

1,698,428 次观看 • 4 个月前

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

Palash Bansal

29,986 次观看 • 6 个月前

Flova ai Agent Canvas Mode is now live. See your entire creative workflow at a glance, drag and drop shots and assets, insert new scenes wherever inspiration strikes, and organize complex projects with one click. Switch between List Mode for clarity and Canvas Mode for the bigger picture—then ask the Flova Agent to help you refine each shot directly on the canvas. More space to think. More control to create.

Flova ai Agent Canvas Mode is now live. See your entire creative workflow at a glance, drag and drop shots and assets, insert new scenes wherever inspiration strikes, and organize complex projects with one click. Switch between List Mode for clarity and Canvas Mode for the bigger picture—then ask the Flova Agent to help you refine each shot directly on the canvas. More space to think. More control to create.

FlovaAI

119,610 次观看 • 2 个月前

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Stitch by Google

38,208 次观看 • 4 个月前