@daeinc/canvas

Install

npm i @daeinc/canvas

then,

import { createCanvas, ... } from "@daeinc/canvas"

Functions

Documentation is updated for 0.16.0.

createCanvas

const createCanvas: ({
  parent,
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  parent?: string | Element | null;
  context?: "2d" | "webgl" | "webgl2" | "webgpu";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?:
    | CanvasRenderingContext2DSettings
    | WebGLContextAttributes;
})

Create a new canvas and return { canvas, context, width, height } in 2d or WebGPU and { canvas, gl, width, height } in webgl.

The parent can be either string (will be used for querySelector()) or Element. If parent is undefined or null, the canvas is not attached to the document. Returned width and height may not be the same as canvas.width and canvas.height due to pixelRatio scaling.

context supports 2d, webgl, webgl2 and webgpu and creates a proper context. When webgl context is created, gl.viewport() is internally called to scale context according to pixelRatio parameter.

createOffscreenCanvas

const createOffscreenCanvas: ({
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  context: "2d" | "webgl" | "webgl2";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?:
    | CanvasRenderingContext2DSettings
    | WebGLContextAttributes;
})

Creates an OffscreenCanvas.

resizeCanvas

const resizeCanvas: ({
  canvas,
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  canvas: HTMLCanvasElement;
  context: "2d" | "webgl" | "webgl2" | "webgpu";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?: CanvasRenderingContext2DSettings | WebGLContextAttributes;
}) => {
  canvas: HTMLCanvasElement;
  context?:
    | CanvasRenderingContext2D
    | WebGLRenderingContext
    | WebGL2RenderingContext;
  gl?: WebGLRenderingContext | WebGL2RenderingContext;
  width: number;
  height: number;
};

Resize canvas and return data { canvas, context?, gl?, width, height }. When scaleContext=true, it also scale the context to pixelRatio. scaleContext has no effect on WebGPU canvas.

License

MIT