Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.
Also known as: HTMLInCanvasDOMTextureHTML textureDOM texture
Moves in browsers that support WebGPU
This device could not render the demo — showing a still
Code reflects the control values
React
// Renders only in browsers with WebGPU.
import { Shader, HTMLInCanvas } from 'shaders/react'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: 320 }} disableTelemetry>
<HTMLInCanvas>
<h1>Your HTML content here</h1>
</HTMLInCanvas>
</Shader>
)
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, HTMLInCanvas } from 'shaders/vue'
</script>
<template>
<Shader style="width: 100%; height: 320px" :disable-telemetry="true">
<HTMLInCanvas>
<h1>Your HTML content here</h1>
</HTMLInCanvas>
</Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
import { Shader, HTMLInCanvas } from 'shaders/svelte'
</script>
<Shader style="width: 100%; height: 320px" disableTelemetry>
<HTMLInCanvas />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, HTMLInCanvas } from 'shaders/solid'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
<HTMLInCanvas>
<h1>Your HTML content here</h1>
</HTMLInCanvas>
</Shader>
)
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'
const shader = await createShader(document.getElementById("canvas"), {
components: [
{
type: 'HTMLInCanvas',
}
]
}, { disableTelemetry: true })
Props · HTMLInCanvas
Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).
This component has no adjustable props.
Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id
Think of this as a capture of a webpage element placed on the canvas: existing DOM content becomes a texture layer for shader effects.
The registry exposes no configurable props. The direct child of a `<canvas layoutsubtree>` supplies the content, and changes to that DOM produce an updated capture.
This is experimental and only available in Chrome Canary with `chrome://flags/#canvas-draw-element` enabled; upstream says it is not suitable for production use. Browser support is limited, so reserve it for prototypes or demos where you control the environment.
When to use
Use it to prototype shader treatments on existing DOM or combine animated HTML with canvas layers in a controlled demo. Avoid it for production features that need broad browser support.
