# Function compile

- compile(
  canvas: HTMLCanvasElement,
  descriptors: DrawableDescriptor[],
  settingsOverrides?: Partial<StartupSettings>,
  ): Promise<Renderer>

  Compiles a new renderer instance. There can be multiple renderers on a single page.

  > Asynchronous behaviour is required for parallel shader compiling. Trying to draw before the returned promise resolves results in no action being taken. Settings can be set before the promise resolves and they will be applied later.

  The descriptors of all to-be-drawn objects are required before creating the renderer, allowing the compiler to only create the shaders that will actually be used.

  Example usage:

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

       const canvas = document.querySelector('canvas');
       const Circle = CircleFactory(hsl(30, 66, 50));
       const renderer = await compile(canvas, [Circle.descriptor, CircleLight.descriptor]);

  #### 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.

  - settingsOverrides: Partial<StartupSettings> = {}

    Sensible defaults are provided, but these can be overridden.

  #### Returns Promise<Renderer>

  - Defined in compile.ts:30