# Function runAnimation

- runAnimation(
  canvas: HTMLCanvasElement,
  descriptors: DrawableDescriptor[],
  animate: (
  renderer: Renderer,
  currentTimeInMilliseconds: number,
  deltaTimeInMilliseconds: number,
  ) => boolean,
  settings?: Partial<StartupSettings & RuntimeSettings>,
  ): Promise<void>

  Implements the boilerplate code required to run real-time animations in the browser. An FPS based autoscaler is also used. This creates an additional `fps` key in the renderers `insights` property.

  Example usage:

        <canvas id="main" style="width: 300px; height: 150px"></canvas>

  > The canvas needs to have a fixed size specified by CSS.

      import { CircleFactory, CircleLight, hsl, runAnimation } from 'sdf-2d';

      const canvas = document.querySelector('canvas');
      const Circle = CircleFactory(hsl(180, 100, 40));

      runAnimation(canvas, [Circle.descriptor, CircleLight.descriptor], (renderer, time) => {
        renderer.addDrawable(
          new Circle([150 + 50 * Math.cos(time / 1000), 75 + 50 * Math.sin(time / 1000)], 25)
        );
        renderer.addDrawable(new CircleLight([150, 75], hsl(270, 100, 40), 0.1));
        return true;
      });

  #### Parameters

  - canvas: HTMLCanvasElement

    The returned renderer will only be able to draw to this canvas.

  - descriptors: DrawableDescriptor[]

    The descriptor of every single object (and light) that ever needs to be drawn by this renderer has to be given before compiling.

  - animate: (
    renderer: Renderer,
    currentTimeInMilliseconds: number,
    deltaTimeInMilliseconds: number,
    ) => boolean

    This function will be called before rendering each frame. `renderDrawables` must not be called by the animate function. It should return `true` if the animation should be continued. To break out of the animation loop, a `false` (falsy) return value must be given.

  - settings: Partial<StartupSettings & RuntimeSettings> = {}

  #### Returns Promise<void>

  - Defined in run-animation.ts:46