ImageShape

A picture drawn at its own aspect ratio with its longer side filling the 1x1 box.

Either pass a URL or anything the canvas can draw, like an <img>, <canvas> or ImageBitmap. Particles whose image hasn’t loaded yet aren’t drawn, and appear once it has. An image that fails to load is reported once, in the console.

An image keeps its own colors: it fades out with the particle’s opacity, but isn’t tinted by its color or lit.

Example

confetti(button, { shapes: [{ type: "image", image: "/logo.png" }] });

Properties

imagestring | CanvasImageSource

A URL to load the image from, or anything the canvas can draw. Loading only starts when the first particle spawns, so a large image may not show up in the first effect. To show it right away, preload it, for example with <link rel="preload" as="image" href="/logo.png">, or pass an <img> that has already loaded. An SVG passed as an <img> needs a width and height.

type"image"