https://github.com/marcbouchenoire/create-canvas-context

🎨 Create a canvas and get a rendering context from it.
https://github.com/marcbouchenoire/create-canvas-context

canvas context offscreen

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/marcbouchenoire/create-canvas-context
• Owner: marcbouchenoire
• License: mit
• Created: 2021-02-15T19:56:23.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-12-21T12:02:14.000Z (about 1 year ago)
• Last Synced: 2024-12-11T19:48:08.054Z (about 1 month ago)
• Topics: canvas, context, offscreen
• Language: TypeScript
• Homepage: https://npm.im/create-canvas-context
• Size: 2.81 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# create-canvas-context

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

[![build](https://img.shields.io/github/actions/workflow/status/marcbouchenoire/create-canvas-context/.github/workflows/ci.yml)](https://github.com/marcbouchenoire/create-canvas-context/actions/workflows/ci.yml)

[![npm](https://img.shields.io/npm/v/create-canvas-context?color=%230cf)](https://www.npmjs.com/package/create-canvas-context)

[![size](https://img.shields.io/bundlephobia/minzip/create-canvas-context?label=size&color=%2385f)](https://bundlephobia.com/package/create-canvas-context)

[![coverage](https://img.shields.io/codecov/c/github/marcbouchenoire/create-canvas-context?color=%23e4b)](https://codecov.io/gh/marcbouchenoire/create-canvas-context)

[![license](https://img.shields.io/github/license/marcbouchenoire/create-canvas-context?color=%23f81)](https://github.com/marcbouchenoire/create-canvas-context/blob/main/LICENSE)

- 🗜️ **Tiny**: Just around **600 bytes** on modern platforms

- 🧪 **Reliable**: Fully tested with [100% code coverage](https://codecov.io/gh/marcbouchenoire/create-canvas-context)

- 📦 **Typed**: Written in [TypeScript](https://www.typescriptlang.org/) and includes definitions out-of-the-box

- 💨 **Zero dependencies**

## Installation

```bash

npm install create-canvas-context

```

## Usage

Import `createCanvasContext`.

```typescript

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.

```typescript

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

// context: CanvasRenderingContext2D

// canvas: HTMLCanvasElement

```

Optionally override defaults using [options](#options).

```typescript

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()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) and adds a few options to tweak the behavior of `createCanvasContext`.

#### `canvas`

```typescript

canvas?: HTMLCanvasElement | OffscreenCanvas

```

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

#### `offscreen`

```typescript

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()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen).

#### `width` and `height`

```typescript

width?: number

height?: number

```

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