konfeti - v0.6.0
    Preparing search index...

    Type Alias DrawShapeDefinition<TOptions>

    Draw-Based Custom Shape. Full control: draw anything with the 2D context. The library has already applied position, rotation, flip, skew, scale and opacity — draw centered at 0, 0.

    defineShape("ring", {
      draw: (ctx, p, { thickness = 3 }) => {
        ctx.lineWidth = thickness;
        ctx.strokeStyle = p.fill;
        ctx.beginPath();
        ctx.arc(0, 0, p.width / 2, 0, Math.PI * 2);
        ctx.stroke();
      },
    });

    Runs for every particle every frame — avoid allocations inside draw.

    type DrawShapeDefinition<TOptions extends object> = {
        aspectRatio?: number;
        defaultSize?: Range<Pixels>;
        draw: (
            context: CanvasRenderingContext2D,
            particle: CustomShapeParticle,
            options: Readonly<TOptions>,
        ) => void;
    }

    Type Parameters

    • TOptions extends object
    Index
    aspectRatio? defaultSize? draw
    aspectRatio?: number

    Height-to-Width Ratio of the Box.

    1

    defaultSize?: Range<Pixels>

    Size When the Entry Sets None.

    [12, 18]

    draw: (
        context: CanvasRenderingContext2D,
        particle: CustomShapeParticle,
        options: Readonly<TOptions>,
    ) => void

    Draw One Particle.

    Settings
    Member Visibility

    On This Page
    Properties