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)

    Index

    Accessors

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

    Constructors

    constructor

    Methods

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

    Properties

    el opts

    Accessors

    • get toAbsolute(): 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 Scaler

    • get toRelative(): 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 Scaler

    Constructors

    Methods

    • 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

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

      Returns void

    • 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

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

      Returns { height: number; width: number }

    • 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: GridCellAccessor<Rgb8Bit>;
          grid: Grid;
          set: GridCellSetter<Rgb>;
      }

    Properties

    el: HTMLCanvasElement
    opts: CanvasHelperOptions

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties