Chapter 20: <HtmlInCanvas>

Core Idea

This component renders its children into a <canvas> using the browser’s HTML-in-canvas API and allows you to draw an effect using the Canvas 2D API, WebGL or WebGPU.

Key Concepts

• HtmlInCanvas.isSupported()
• Using WebGL and WebGPU during renders
• API
• width
• height
• pixelDensity?<AvailableFrom v="4.0.472" />
• children
• effects?<AvailableFrom v="4.0.464" />

Code Examples

export const MyComp: React.FC = () => {
  return (
    <HtmlInCanvas width={1280} height={720}>
      <div style={{fontSize: 80}}>Hello</div>
    </HtmlInCanvas>
  );
};

• What it demonstrates: Usage pattern for <HtmlInCanvas> from the official docs.

Key Takeaways

1. Understand htmlincanvas.issupported() when working with <HtmlInCanvas>.
2. Understand using webgl and webgpu during renders when working with <HtmlInCanvas>.
3. Understand api when working with <HtmlInCanvas>.
4. Understand width when working with <HtmlInCanvas>.
5. Understand height when working with <HtmlInCanvas>.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.