create-canvas-context

create-canvas-context

🎨 Create a canvas and get a rendering context from it.

Installation

Skypack

import { createCanvasContext } from "https://cdn.skypack.dev/create-canvas-context"

Yarn

yarn add create-canvas-context

npm

npm install create-canvas-context

Usage

Import createCanvasContext.

import { createCanvasContext } from "create-canvas-context"

Invoke it while specifying a context type ("2d", "bitmaprenderer", "webgl" or "webgl2") and access in return the specified rendering context and its canvas as a pair.

const [context, canvas] = createCanvasContext("2d")

// context: CanvasRenderingContext2D
// canvas: HTMLCanvasElement

Optionally override defaults using options.

const [context, canvas] = createCanvasContext("webgl", {
  canvas: document.createElement("canvas"),
  offscreen: true,
  alpha: false
})

// context: WebGLRenderingContext
// canvas: OffscreenCanvas

Options

A secondary options argument surfaces all context-specific attributes available using HTMLCanvasElement.getContext() and adds a few optional settings to tweak the behavior of createCanvasContext.

canvas

canvas?: HTMLCanvasElement | OffscreenCanvas

Setting canvas to an existing canvas (either an HTMLCanvasElement or an OffscreenCanvas) will provide it instead of creating one.

offscreen

offscreen?: boolean = false

Setting offscreen to true will create an OffscreenCanvas instead of an HTMLCanvasElement.

If you provided an existing HTMLCanvasElement using the canvas option, it will get its control transferred to an OffscreenCanvas using HTMLCanvasElement.transferControlToOffscreen().

width and height

width?: number
height?: number

Setting width and height will set specific canvas dimensions and override existing values.