Edited by humans. Written by AI. How our editing works
BUZZRAGNews. Trends. Ideas — distilled in minutes.
All articles

Chrome's HTML-in-Canvas Experiment Might Make the Web Fun Again

Chrome Canary's new HTML-in-Canvas feature lets developers embed interactive DOM elements in WebGL scenes. It's experimental, buggy, and kind of brilliant.

Written by AI. Tyler Nakamura

April 19, 20265 min read
Share:
A person in a colorful striped jacket and glasses gives a thumbs up against black background with text about HTML in Canvas…

Photo: Better Stack / YouTube

There's a weird explosion happening on dev Twitter right now, and for once it's not people arguing about semicolons. Developers are dropping interactive HTML elements into 3D scenes, making jelly sliders that actually work, and building websites where you have to play pinball to unsubscribe. It's chaotic, it's experimental, and honestly? It might be exactly what the web needs.

The catalyst is HTML-in-Canvas, a new Chrome experiment that's currently available in Chrome Canary behind a flag. The pitch is simple but potentially game-changing: take real, interactive DOM elements and render them directly inside WebGL or 2D canvas scenes. Not fake them. Not rebuild them from scratch. Just... put them in there.

What Canvas Has Been Missing

Here's the tension that HTML-in-Canvas is trying to resolve: Canvas is incredible for custom UIs and visual effects that CSS can't touch. Want physics-based interactions? Particle systems? Game-like interfaces? Canvas is your tool. But canvas has always been terrible at the stuff HTML does effortlessly—complex text layouts, forms, accessibility, internationalization.

The Better Stack developer in the video explains it clearly: "Canvas can enable some awesome UIs and customizations... things that are harder to do, if not impossible in CSS. But what canvas can't do is easily render complex layouts of text and HTML content. You tend to have to rebuild them from scratch internally."

That rebuilding is where things get messy. Developers have spent years recreating text rendering, form inputs, and interactive elements inside canvas contexts, and the results are usually worse than just using HTML. Worse accessibility. Worse performance. Worse everything except the specific visual effect you wanted.

HTML-in-Canvas proposes a different approach: keep your HTML as HTML, but make it available as a texture inside your canvas scene. It's still real HTML—it's in the accessibility tree, it can receive focus, it updates live—but it renders inside your 3D world or custom canvas layout.

How It Actually Works

The implementation is cleverer than I expected. You start by putting your HTML elements as children of the canvas element itself. Normally, these would just be fallback content for browsers that don't support canvas. But with HTML-in-Canvas, you add a layoutSubtree attribute to your canvas, which tells the browser to treat those children as real layout participants.

Here's where it gets interesting: those elements are still invisible. They're in the DOM, they're accessible, but they're not painted to the screen. To actually see them, you convert them into textures using functions like textElementImage2D for WebGL or drawElementImage for 2D canvas.

The video demonstrates this with a London Underground timetable that gets embedded into a Three.js scene. The HTML element updates live—the clock ticks, times change—and those updates automatically flow through to the canvas texture. "You can think of this as essentially just looking at what this element would be, taking a screenshot of this, and then placing it in the texture's place," the presenter explains.

It's basically live screenshotting, but optimized and built into the browser.

The Demos Are Wild

Once developers got access to Chrome Canary with the flag enabled, Twitter exploded with experiments. Wes Bos built something. Matt Rothenberg's demo kicked off the wave. Someone made a jelly slider that's still a real input element underneath—just rendered with physics effects on top.

The variety is what's striking. Some demos are practical: better form interactions, 3D data visualizations with real HTML tooltips. Others are pure whimsy: floating eyes that follow your cursor, interfaces that bounce and squish while remaining fully functional.

There's even a dark pattern demo where you have to play pinball to unsubscribe from something. Which is terrible UX but also kind of proves the point—you can make web interactions feel like anything now, not just rectangular boxes.

The Current Reality Check

This is an experiment for a reason. The proposal's GitHub page is honest about the current limitations, and they're not trivial.

Performance is "a little bit wonky," as the video puts it. There are timing bugs where drawElementImage can be a frame late compared to the DOM state, causing visual desyncing. And apparently if you try to put a scrollbar inside your canvas children, Chrome just crashes. Not "doesn't work"—crashes.

These aren't fundamental problems with the concept, though. They're the kind of issues you'd expect from an early experimental implementation. The Chrome team is actively looking for this feedback.

More interesting are the privacy concerns. HTML-in-Canvas could theoretically leak information for fingerprinting—system colors, themes, spelling and grammar markers, visited link states. The proposal includes privacy-preserving measures to exclude this sensitive data, but it's a legitimate tension. Adding new browser capabilities always creates new vectors for tracking.

Why This Matters Beyond the Gimmicks

It's easy to look at jelly sliders and bouncing eyes and think this is just developers playing with toys. And sure, some of it is. But underneath the whimsy, there's a real accessibility story here.

Right now, if you want a custom canvas-based interface, you often have to choose: make it beautiful and inaccessible, or make it accessible and constrained by HTML's visual limitations. HTML-in-Canvas suggests you might not have to choose. Your screen reader can still read your 3D interface because it's still real HTML underneath.

That's not guaranteed—developers can still make inaccessible garbage with any tool—but at least the path of least resistance now includes accessibility by default.

The video's presenter admits their enthusiasm: "I like what I've seen so far, so I would love if this could break out of just being an experiment." Same, honestly. The web has felt increasingly same-y, with every site using the same component libraries and design patterns. Some of that's good—accessibility and usability matter. But we've also lost some of the weird, experimental energy that made early web development fun.

HTML-in-Canvas won't single-handedly bring back web whimsy, but it removes a technical barrier that's been there for years. Whether developers use it to build genuinely better interfaces or just make everything wobble unnecessarily is up to us. Both seem fine, actually.

Tyler Nakamura is Buzzrag's consumer tech and gadgets correspondent.

From the BuzzRAG Team

We Watch Tech YouTube So You Don't Have To

Get the week's best tech insights, summarized and delivered to your inbox. No fluff, no spam.

Weekly digestNo spamUnsubscribe anytime

More Like This

Open box overflowing with AI audio tools and icons against dark background with "TOO MUCH?" text and yellow arrow pointing…

Microsoft's VibeVoice Can Clone Your Voice—Here's Why

Microsoft released VibeVoice, an open-source voice cloning tool that runs offline. Better Stack tested it against ElevenLabs and Chatterbox—here's what works.

Tyler Nakamura·4 months ago·5 min read
A cartoon snail on a metal rail with a yellow arrow pointing right, with "GOODBYE" and "SLOW RAG" text on a black background

Crawl4AI Claims 6x Speed Over Scrapy for RAG Pipelines

Crawl4AI promises faster web scraping built specifically for AI workflows. Better Stack tests its claims against traditional Python tools.

Tyler Nakamura·3 months ago·6 min read
Man rejecting AI chip crossed out with checkmark over cartoon character wearing glasses, illustrating component-based…

Building Landing Pages Without Building Anything

Shadcn Blocks promises production-ready landing pages in minutes. A developer demonstrates the block-based approach—and surfaces what it means for web design.

Marcus Chen-Ramirez·2 months ago·5 min read
A man with a surprised expression stands next to a colorful 3D "CSS WRAPPED 2025" graphic featuring a blue character…

CSS Revolution: 2025's Game-Changing Features

Explore 2025's CSS advancements reshaping web dev with new features, APIs, and customization options.

Yuki Okonkwo·5 months ago·3 min read
Yellow heart-eyes emoji with closed smile against purple wireframe grid background, with "Modern CSS" text below

CSS Just Ate JavaScript's Lunch (And Nobody Noticed)

Modern CSS now handles carousels, tooltips, and UI interactions without JavaScript. Chrome's CSS Wrapped 2025 shows how far the language has come.

Mike Sullivan·3 months ago·6 min read
Elderly woman with glasses looking surprised, with jQuery 4 logo and text on black background

jQuery 4: A Blast from the Past with a Modern Twist

jQuery 4 updates after 20 years. Dropping old browser support, modernizing code, and slimming down for today's web.

Zara Chen·4 months ago·3 min read
Woman wearing headphones smiling at camera next to blue AI agent icon and workflow diagram showing act, tools, and verify…

GitHub's Agentic Workflows Let You Automate Repos in English

GitHub's new Agentic Workflows turn plain English into repository automation. No YAML required—just describe what you want and AI handles the complexity.

Tyler Nakamura·3 months ago·6 min read
Two glowing chip designs labeled M5 Pro and M5 Max in blue and purple neon against a digital circuit background with the…

Apple's M5 Pro & Max Just Changed Everything About Chips

Apple's M5 Pro and Max use chiplets for the first time, ditching efficiency cores entirely. Here's what that means for performance and why it matters.

Tyler Nakamura·3 months ago·6 min read

RAG·vector embedding

2026-04-19
1,363 tokens1536-dimmodel text-embedding-3-small

This article is indexed as a 1536-dimensional vector for semantic retrieval. Crawlers that parse structured data can use the embedded payload below.