You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

create-canvas-context

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-canvas-context

Create a canvas and get a rendering context from it.

1.2.1
latest
Source
npmnpm
Version published
Weekly downloads
1
-75%
Maintainers
1
Weekly downloads
 
Created
Source

create-canvas-context

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

build npm gzipped license

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.

Keywords

canvas

FAQs

Package last updated on 29 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts