create-canvas-context
v1.2.1
Published
Create a canvas and get a rendering context from it.
Downloads
10
Maintainers
Readme
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.