正在加载视频...

视频加载失败

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

HTML in Canvas API is NUTS

Wes Bos

439,401 subscribers

1,190,810 次观看 • 5 个月前 •via X (Twitter)

游戏教育科学技术

Anya Rossi• Live Now

Private livecam show

45 条评论

Wes Bos 的头像

Wes Bos5 个月前

A bit more explanation. Working on some more demos to show soon

Savannah 的头像

Savannah5 个月前

Yes

Wes Bos 的头像

Wes Bos5 个月前

Explain plz

Savannah 的头像

Savannah5 个月前

It's very long winded 😅

Bytenaija 🇳🇬🇨🇦 的头像

Bytenaija 🇳🇬🇨🇦5 个月前

@wesbos Does this use the html in canvas API? How is it relevant here?

Savannah 的头像

Savannah5 个月前

@wesbos Yep

Thomas Nattestad 的头像

Thomas Nattestad5 个月前

(Chrome's PM for the API here) If you have any feedback on the API don't hesitate to share it!

Wes Bos 的头像

Wes Bos5 个月前

@Paul_Kinlan Thanks, will do!

Peter Pistorius 的头像

Peter Pistorius5 个月前

the web is about to get weird again!

Kamalveer Singh 的头像

Kamalveer Singh5 个月前

I was just thinking about making a shooting game thing and this post popped up on my feed. This is amazing.

Hacksore 的头像

Hacksore5 个月前

Basically how Google Docs works 😂

Linus 的头像

Linus5 个月前

I did this a few weeks back

Youssef 🚜 的头像

Youssef 🚜5 个月前

didnt you find out about this like 2 days ago

Wes Bos 的头像

Wes Bos5 个月前

yep, been cranking on demos. A few more coming

Youssef 🚜 的头像

Youssef 🚜5 个月前

keep em coming mate!

Mathew Chan 的头像

Mathew Chan5 个月前

but can you center a div in there

Nick Taylor 的头像

Nick Taylor5 个月前

@1Marc You know you gotta do the Kool Aid man busting through a wall lol

techno yoda 的头像

techno yoda5 个月前

the most underrated feature of claude is that I can one-shot canvas visualizations to just to explain things to people. its surreal how well you can express yourself now if you know what you want to see.

François Best 的头像

François Best5 个月前

cc @orcdev 👀

Chrome for Developers 的头像

Chrome for Developers4 个月前

Now this demo is right on target. Love it.

Wes Bos 的头像

Wes Bos4 个月前

dad

Nick e/code 的头像

Nick e/code5 个月前

It’s almost like we are rebuilding Flash.

Michael? 的头像

Michael?5 个月前

Next level bad UX is here

Pritam 的头像

Pritam5 个月前

wait till people discover webgl

Wes Bos 的头像

Wes Bos5 个月前

This works with webgl!

Guillermo Avalos 的头像

Guillermo Avalos5 个月前

We’re getting Geocities-style sites back, but on cocaine, baby!

Martin Elitzer 的头像

Martin Elitzer5 个月前

wtf. dead nuts!

İlhan Neğiş 🛠️💾 的头像

İlhan Neğiş 🛠️💾5 个月前

ooOOo graphing/chart libraries!

Lucas Nascimento 的头像

Lucas Nascimento5 个月前

that's so cool 🤩

Tone 的头像

Tone5 个月前

Your tutorials were instrumental in giving me my start and I feel so bad I've forgotten to look back in! This is so dope!!

Chan 的头像

Chan5 个月前

This is one of those demos that rewires your idea of what belongs in a browser

Eugene Kirichuk 的头像

Eugene Kirichuk5 个月前

We are so back to Flash-like UIs

NéstorVC 的头像

NéstorVC5 个月前

Is this mobile friendly?

ScrambleYourJets 的头像

ScrambleYourJets5 个月前

Webgl doesn’t exist?

Wes Bos 的头像

Wes Bos5 个月前

Show me putting DOM into WebGL. Also - you can use this with WebGL

shane 的头像

shane5 个月前

Looking forward to seeing some more demos!

Loktar 🇺🇸 的头像

Loktar 🇺🇸5 个月前

SUCH a huge leap for canvas, I'm going to have to dust off some of my old demos tonight and implement some of this 😂

C4B4D4 💿 的头像

C4B4D4 💿5 个月前

What about CORS?

Franklin Williams 的头像

Franklin Williams4 个月前

The Canvas Inner HTML API is pretty useful for creating UI and UX Designs.

Michael Francis 的头像

Michael Francis5 个月前

This would be fantastic for game dev.

Damien Golding 的头像

Damien Golding5 个月前

Wait DOM nodes are in the canvas? I thought it was just about rendering HTML to canvas...

Anton 的头像

Anton5 个月前

Omg why 😄 this reminds me of Lineage 2 that uses HTML for menus

victor 的头像

victor5 个月前

how?? show me.

ouzz 的头像

ouzz5 个月前

I implemented the same logic and rendered the HTML to the canvas. The entire website is rendered using Canvas with no DOM elements

Bob 的头像

Bob5 个月前

The children yearn for Adobe Flash

相关视频

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

Zsolt Kacso

62,811 次观看 • 5 个月前

you can even project DOM events html-in-canvas is insane

you can even project DOM events html-in-canvas is insane

carmen

30,809 次观看 • 4 个月前

Agent mode transition with Three.js, html-in-canvas.

Agent mode transition with Three.js, html-in-canvas.

Zsolt Kacso

112,583 次观看 • 4 个月前

Particle shader reveal on scroll. HTML-in-Canvas.

Particle shader reveal on scroll. HTML-in-Canvas.

Zsolt Kacso

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

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

Shu

56,892 次观看 • 5 个月前

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

681,719 次观看 • 2 年前

Page peel with html-in-canvas, Three.js + TSL. Try it:

Page peel with html-in-canvas, Three.js + TSL. Try it:

Zsolt Kacso

19,135 次观看 • 5 个月前

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Palash Bansal

30,459 次观看 • 5 个月前

My Google IO demo of HTML in Canvas and Web MCP

My Google IO demo of HTML in Canvas and Web MCP

Paul Kinlan

13,501 次观看 • 3 个月前

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 🎨

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

41,696 次观看 • 3 个月前

After seeing the reaction to pretext, I can tell you: the world is not ready for HTML-in-Canvas.

After seeing the reaction to pretext, I can tell you: the world is not ready for HTML-in-Canvas.

Sawyer Hood

116,203 次观看 • 5 个月前

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.

Remotion

581,800 次观看 • 4 个月前

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 次观看 • 4 个月前

8 new Canvas UI components are now live, pushing HTML-in-Canvas and WebGL UI even further. The new dimension keeps expanding. See them in action:

8 new Canvas UI components are now live, pushing HTML-in-Canvas and WebGL UI even further. The new dimension keeps expanding. See them in action:

David Haz

15,768 次观看 • 1 个月前

Back to playing with html-in-canvas! Might release code for this if there's interest.

Back to playing with html-in-canvas! Might release code for this if there's interest.

Zsolt Kacso

19,289 次观看 • 2 个月前

html-in-canvas has been achieved internally glass, ascii, dither, ripples... on any surface 🤯

html-in-canvas has been achieved internally glass, ascii, dither, ripples... on any surface 🤯

shaders

71,790 次观看 • 5 个月前

There is something to this light concept! My last version of it had too much visual noise. Html-in-canvas, Three.js, Fable.

There is something to this light concept! My last version of it had too much visual noise. Html-in-canvas, Three.js, Fable.

Zsolt Kacso

113,061 次观看 • 2 个月前

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,421,703 次观看 • 1 个月前

Just open-sourced a weird Three.js experiment 👀 Tiltshift-in-HTML It combines HTML-in-canvas with Three.js to let UI exist directly inside 3D scenes and react to a tilt-shift effect. Demo:

Just open-sourced a weird Three.js experiment 👀 Tiltshift-in-HTML It combines HTML-in-canvas with Three.js to let UI exist directly inside 3D scenes and react to a tilt-shift effect. Demo:

Yassine Bouanane

18,570 次观看 • 19 天前