ixfx
    Preparing search index...

    Class CanvasHelper

    A wrapper for the CANVAS element that scales the canvas for high-DPI displays and helps with resizing.

    const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both` });
    const { ctx, width, height } = canvas.ctx; // Get drawing context, width & height

    Draw whenever it is resized using the 'resize' event

    canvas.addEventListener(`resize`, ({ctx, size}) => {
     // Use ctx...  
    });

    Or provide a function when initialising:

    const onResize = (ctx, size) => {
     // Do drawing
    }
    const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both`, onResize });

    Automatically draw at animation speeds:

    const draw = () => {
    }
    const canvas = new CanvasHelper(`#my-canvas`, { resizeLogic: `both`, draw });

    Hierarchy (View Summary)

    Constructors

    constructor

    Properties

    el opts

    Accessors

    center ctx dimensionMax dimensionMin height isDisposed logicalCenter ratio size toAbsolute toAbsoluteFixed toRelative toRelativeFixed viewport width

    Methods

    addEventListener clear dispose drawBounds fill fireEvent getDrawHelper getImageData getPhysicalSize getRectangle getWritableBuffer removeEventListener setLogicalSize

    Constructors

    constructor

    • new CanvasHelper(
          domQueryOrEl: Readonly<undefined | null | string | HTMLCanvasElement>,
          opts?: Partial<
              Readonly<
                  {
                      clearOnResize: boolean;
                      colourSpace: PredefinedColorSpace;
                      coordinateScale: ScaleBy;
                      disablePointerEvents: boolean;
                      draw?: (
                          ctx: CanvasRenderingContext2D,
                          size: Geometry.Rect,
                          helper: CanvasHelper,
                      ) => void;
                      height: number;
                      onResize?: (
                          ctx: CanvasRenderingContext2D,
                          size: Geometry.Rect,
                          helper: CanvasHelper,
                      ) => void;
                      pixelZoom: number;
                      resizeLogic?: ElementResizeLogic;
                      skipCss: boolean;
                      width: number;
                      zIndex: number;
                  },
              >,
          >,
      ): CanvasHelper

      Parameters

      • domQueryOrEl: Readonly<undefined | null | string | HTMLCanvasElement>
      • opts: Partial<
            Readonly<
                {
                    clearOnResize: boolean;
                    colourSpace: PredefinedColorSpace;
                    coordinateScale: ScaleBy;
                    disablePointerEvents: boolean;
                    draw?: (
                        ctx: CanvasRenderingContext2D,
                        size: Geometry.Rect,
                        helper: CanvasHelper,
                    ) => void;
                    height: number;
                    onResize?: (
                        ctx: CanvasRenderingContext2D,
                        size: Geometry.Rect,
                        helper: CanvasHelper,
                    ) => void;
                    pixelZoom: number;
                    resizeLogic?: ElementResizeLogic;
                    skipCss: boolean;
                    width: number;
                    zIndex: number;
                },
            >,
        > = {}

      Returns CanvasHelper

    Properties

    Readonlyel

    el: HTMLCanvasElement

    Readonlyopts

    opts: Readonly

    Accessors

    center

    • get center(): { x: number; y: number }

      Gets the center coordinate of the canvas

      Returns { x: number; y: number }

    ctx

    • get ctx(): CanvasRenderingContext2D

      Gets the drawing context

      Returns CanvasRenderingContext2D

    dimensionMax

    • get dimensionMax(): number

      Returns the width or height, whichever is largest

      Returns number

    dimensionMin

    • get dimensionMin(): number

      Returns the width or height, whichever is smallest

      Returns number

    height

    • get height(): number

      Gets the logical height of the canvas See also: width, size

      Returns number

    isDisposed

    • get isDisposed(): boolean

      Returns boolean

    logicalCenter

    • get logicalCenter(): { x: number; y: number }

      Returns { x: number; y: number }

    ratio

    • get ratio(): number

      Gets the current scaling ratio being used to compensate for high-DPI display

      Returns number

    size

    toAbsolute

    • get toAbsolute(): Geometry.Scaler.Scaler

      Returns a Scaler that converts from relative to absolute coordinates. This is based on the canvas size.

      // Assuming a canvas of 800x600
      toAbsolute({ x: 1, y: 1 });      // { x: 800, y: 600}
      toAbsolute({ x: 0, y: 0 });      // { x: 0, y: 0}
      toAbsolute({ x: 0.5, y: 0.5 });  // { x: 400, y: 300}

      Returns Geometry.Scaler.Scaler

    toAbsoluteFixed

    toRelative

    • get toRelative(): Geometry.Scaler.Scaler

      Returns a Scaler that converts from absolute to relative coordinates. This is based on the canvas size.

         * // Assuming a canvas of 800x500
      toRelative({ x: 800, y: 600 });  // { x: 1,   y: 1 }
      toRelative({ x: 0, y: 0 });   // { x: 0,   y: 0 }
      toRelative({ x: 400, y: 300 }); // { x: 0.5, y: 0.5 }

      Returns Geometry.Scaler.Scaler

    toRelativeFixed

    viewport

    width

    • get width(): number

      Gets the logical width of the canvas See also: height, size

      Returns number

    Methods

    addEventListener

    clear

    • clear(): void

      Clears the canvas.

      Shortcut for: ctx.clearRect(0, 0, this.width, this.height)

      Returns void

    dispose

    drawBounds

    • drawBounds(strokeStyle?: string): void

      Parameters

      • strokeStyle: string = ...

      Returns void

    fill

    • fill(colour?: string): void

      Fills the canvas with a given colour.

      Shortcut for:

         * ctx.fillStyle = ``;
      ctx.fillRect(0, 0, this.width, this.height);

      Parameters

      • Optionalcolour: string

        Colour

      Returns void

    ProtectedfireEvent

    getDrawHelper

    • getDrawHelper(): void

      Creates a drawing helper for the canvas. If one is already created it is reused.

      Returns void

    getImageData

    • getImageData(): ImageData

      Gets the image data for the canvas. Uses the 'physical' canvas size. Eg. A logical size of 400x400 might be 536x536 with a high-DPI display.

      Returns ImageData

    getPhysicalSize

    • getPhysicalSize(): { height: number; width: number }

      Gets the drawable area of the canvas. This accounts for scaling due to high-DPI displays etc.

      Returns { height: number; width: number }

    getRectangle

    getWritableBuffer

    • getWritableBuffer(): {
          flip: () => void;
          get: Geometry.GridCellAccessor<Rgb8Bit>;
          grid: Geometry.Grid;
          set: Geometry.GridCellSetter<Rgb>;
      }

      Returns the canvas frame data as a writable grid. When editing, make as many edits as needed before calling flip, which writes buffer back to the canvas.

         * const g = helper.getWritableBuffer();
      // Get {r,g,b,opacity} of pixel 10,10
      const pixel = g.get({ x: 10, y: 10 });

      // Set a colour to pixel 10,10
      g.set({ r: 0.5, g: 1, b: 0, opacity: 0 }, { x: 10, y: 10 });

      // Write buffer to canvas
      g.flip();

      Uses 'physical' size of canvas. Eg with a high-DPI screen, this will mean a higher number of rows and columns compared to the logical size.

      Returns {
          flip: () => void;
          get: Geometry.GridCellAccessor<Rgb8Bit>;
          grid: Geometry.Grid;
          set: Geometry.GridCellSetter<Rgb>;
      }

    removeEventListener

    setLogicalSize

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods