The Canvas2D is a double-buffered construct to help with drawing to a HTMLCanvasElement with best possible performance. We utilize an OffscreenCanvas with a OffscreenCanvasRenderingContext2D to draw frames and expect to render them back to the DOM in regular intervals.

Hierarchy (View Summary)

Constructors

Properties

Our back buffer.

The canvas element we're interacting with.

The configuration that was used for this canvas.

Accessors

  • get height(): number

    Retrieves the height of the canvas.

    Returns number

    The height of the canvas.

  • get width(): number

    Retrieves the width of the canvas.

    Returns number

    The width of the canvas.

Methods

  • Fills the entire back buffer with the given color.

    Parameters

    • color: number

      The color to fill the back buffer with.

    Returns void

  • Draws a slightly transparent, black rectangle over the canvas, and then reads the result back into the buffer.

    Parameters

    • color: number = ...

      The color to fade the buffer with. The alpha component of the color defines how strong the fade is. 0 is not at all, 255 makes it instantly black.

    Returns void

  • Returns the color of a pixel in the back buffer.

    Parameters

    • x: number

      The X coordinate to retrieve.

    • y: number

      The X coordinate to retrieve.

    Returns number

    The color of the pixel at the given local.

  • Draw FPS information onto the canvas.

    Parameters

    • frameTimes: number[]

      Durations of previous frame draws.

    • frameTime: number

      The duration of the previous frame draw.

    • timeDelta: number

      The time elapsed since the last frame.

    Returns void

  • Colors a pixel in the back buffer.

    Parameters

    • x: number

      The X coordinate to color.

    • y: number

      The Y coordinate to color.

    • color: number

      The color to place at the coordinate.

    Returns void