Chapter 251: HTML-in-canvas

Core Idea

<video src="https://pub-646d808d9cb240cea53bedc76dd3cd0c. r2.

Key Concepts

• Enabling the flag in Chrome
• The <HtmlInCanvas> component
• Using the browser API directly
• Examples
• Example prompts
• With @remotion/transitions
• Limitations
• Rendering

Code Examples

const onPaint: HtmlInCanvasOnPaint = ({canvas, element, elementImage}) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Failed to acquire 2D context');
  }

  ctx.reset();
  ctx.filter = 'blur(8px)';
  const transform = ctx.drawElementImage(elementImage, 0, 0);
  element.style.transform = transform.toString();
};

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

• What it demonstrates: Usage pattern for HTML-in-canvas from the official docs.

Key Takeaways

1. Understand enabling the flag in chrome when working with HTML-in-canvas.
2. Understand the <htmlincanvas> component when working with HTML-in-canvas.
3. Understand using the browser api directly when working with HTML-in-canvas.
4. Understand examples when working with HTML-in-canvas.
5. Understand example prompts when working with HTML-in-canvas.

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.