🎨 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
npm install create-canvas-contextImport 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: HTMLCanvasElementOptionally override defaults using options.
const [context, canvas] = createCanvasContext("webgl", {
canvas: document.createElement("canvas"),
offscreen: true,
alpha: false
})
// context: WebGLRenderingContext
// canvas: OffscreenCanvasA secondary options argument surfaces all context-specific attributes available using HTMLCanvasElement.getContext() and adds a few options to tweak the behavior of createCanvasContext.
canvas?: HTMLCanvasElement | OffscreenCanvasSetting canvas to an existing canvas (either an HTMLCanvasElement or an OffscreenCanvas) will provide it instead of creating one.
offscreen?: boolean = falseSetting 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?: number
height?: numberSetting width and height will set specific canvas dimensions and override existing values.