create-canvas-context

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

• 🗜️ Tiny: Just around 600 bytes on modern platforms
• 🧪 Reliable: Fully tested with 100% code coverage
• 📦 Typed: Written in TypeScript and includes definitions out-of-the-box
• 💨 Zero dependencies

Installation

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 options 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.