@daeinc/canvas NPM

@daeinc/canvas

npm version badge npm bundle size badge

Install

npm i @daeinc/canvas

then,

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

Functions

Documentation is updated for 0.10.0.

Note: drawing functions up to 0.7.1 has now moved to @daeinc/draw.

createCanvas

const createCanvas: ({
  parent,
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
  offscreen,
}: {
  parent?: string | Element | undefined;
  context?: "2d" | "webgl" | "webgl2" | undefined;
  width: number;
  height: number;
  pixelRatio?: number | undefined;
  scaleContext?: boolean | undefined;
  attributes?:
    | CanvasRenderingContext2DSettings
    | WebGLContextAttributes
    | undefined;
  offscreen?: boolean | undefined;
}) => {
  canvas: HTMLCanvasElement | OffscreenCanvas;
  context:
    | CanvasRenderingContext2D
    | WebGLRenderingContext
    | WebGL2RenderingContext
    | OffscreenCanvasRenderingContext2D;
  gl?: WebGLRenderingContext | WebGL2RenderingContext | undefined;
  width: number;
  height: number;
};

Create a new canvas and return { canvas, context, gl?, width, height }.

It takes an optional parent parameter. The parent can be either string (will be used for querySelector()) or Element. Returned width and height may not be the same as canvas.width and canvas.height due to pixelRatio scaling.

context supports 2d, webgl or webgl2 and creates a proper context. When webgl context is created, gl object will also be returned. Internally, gl.viewport() is called to scale context according to pixelRatio parameter.

When offscreen is true, the canvas will not be attached to document. It still creates a regular HTMLCanvasElement. For a real offscreen canvas, use createOffscreenCanvas().

Returned context may ber 2d or webgl, return type assertions are needed when calling createCanvas(). See demos for how to use.

createOffscreenCanvas

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

Creates an OffscreenCanvas.

resizeCanvas

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

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

setupCanvas

const setupCanvas: ({
  parent,
  canvas,
  width,
  height,
  pixelRatio,
}: {
  parent?: string | Element | undefined;
  canvas: HTMLCanvasElement;
  width: number;
  height: number;
  pixelRatio?: number | undefined;
}) => {
  canvas: HTMLCanvasElement;
  width: number;
  height: number;
  pixelRatio: number;
};