Image Clip

The ImageClip renders a static image on the canvas. Use it for photos, logos, or any non-animated visual asset.

Create an Image Clip

const mediaId = await Engine.getInstance()
  .getLibrary()
  .addMedia(
    "https://images.pexels.com/photos/24253539/pexels-photo-24253539/free-photo-of-a-bridge-over-a-river-with-a-city-in-the-background.jpeg?auto=compress&cs=tinysrgb&w=1600",
  );

const clip = await layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
  duration: 5,
});
clip.style.setPosition(960, 540);
clip.style.setScale(0.6, 0.6);

Idle

List of Supported Formats

Format	Support
JPEG	✅
PNG	✅
GIF	✅
WEBP	✅
BMP	✅
HEIC	✅

INFO

Animated GIFs should use the Gif clip instead so the animation plays back correctly. Static PNG/WebP with transparency work fine here.

See Also

• Gif
• Svg
• Crop and Zoom
• Clip API Reference
• API reference: ImageClip