Chapter 188: <CanvasImage>

Core Idea

Renders a static image onto a <canvas> element.

Key Concepts

• API
• src
• effects?
• width?
• height?
• fit?
• className?
• id?

Code Examples

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <CanvasImage src={staticFile('image.png')} />
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand api when working with <CanvasImage>.
2. Understand src when working with <CanvasImage>.
3. Understand effects? when working with <CanvasImage>.
4. Understand width? when working with <CanvasImage>.
5. Understand height? when working with <CanvasImage>.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.