CustomShape

A shape drawn by a custom function, for anything a Path2D cannot express, such as text, images or gradients.

The function is called once per particle on every frame. Before it is called, the context is transformed into shape space (centered at (0, 0), with +y pointing down, rotated according to the particle’s orientation, with 1 unit being equal to the particle’s size) and fillStyle is set to the particle’s (lit) color.

The function also receives the particle being drawn, so the drawing can depend on it.

You are free to modify any context state, since it is saved and restored around each call. Nothing will be drawn unless your function does so, for example via ctx.fill().

If the shape can be built using a Path2D, it is recommended to use PathShape instead.

Example

const ring: CustomShape = {
    type: "custom",
    draw(ctx, particle) {
        const progress = particle.age / particle.lifetime;
        ctx.strokeStyle = ctx.fillStyle;
        ctx.lineWidth = 0.2 * (1 - progress);
        ctx.beginPath();
        ctx.arc(0, 0, 0.4, 0, 2 * Math.PI);
        ctx.stroke();
    },
};

Properties

draw(ctx: CanvasRenderingContext2D, particle: Readonly<Particle>) => void

Draws the particle, in shape space.

type"custom"