# canvas-context

> Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu), optionally offscreen for possible use in a Worker.

Latest version **3.3.1** (published 2025-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-context
pnpm add canvas-context
yarn add canvas-context
bun add canvas-context
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.1 |
| Published | 2025-09-15 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Damien Seguin |
| Maintainers | dmnsgn |
| Keywords | canvas, context, offscreen, worker, offscreen-canvas, 2d, webgl, experimental-webgl, webgl2, bitmaprenderer, webgpu, gpupresent |

## Links

- npm: https://www.npmjs.com/package/canvas-context
- Repository: https://github.com/dmnsgn/canvas-context
- Issues: https://github.com/dmnsgn/canvas-context/issues
- Funding: https://paypal.me/dmnsgn
- npm.io page: https://npm.io/package/canvas-context

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.3.1 (latest) — 2025-09-15
- 3.3.0 — 2024-07-06
- 3.2.0 — 2022-04-02
- 3.1.0 — 2021-10-02
- 3.0.2 — 2021-04-14
- 3.0.1 — 2021-03-22
- 3.0.0 — 2021-03-18
- 2.0.0 — 2020-03-06
- 1.0.3 — 2019-04-29
- 1.0.2 — 2019-04-29
- 1.0.1 — 2019-02-06
- 1.0.0 — 2019-02-04

## README

# canvas-context

[![npm version](https://img.shields.io/npm/v/canvas-context)](https://www.npmjs.com/package/canvas-context)
[![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/canvas-context)
[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/canvas-context)](https://bundlephobia.com/package/canvas-context)
[![dependencies](https://img.shields.io/librariesio/release/npm/canvas-context)](https://github.com/dmnsgn/canvas-context/blob/master/package.json)
[![types](https://img.shields.io/npm/types/canvas-context)](https://github.com/microsoft/TypeScript)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)
[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)
[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)
[![license](https://img.shields.io/github/license/dmnsgn/canvas-context)](https://github.com/dmnsgn/canvas-context/blob/master/LICENSE)

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu), optionally offscreen for possible use in a Worker.

[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)
[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)
[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)

![](https://raw.githubusercontent.com/dmnsgn/canvas-context/master/screenshot.gif)

See the [example](https://dmnsgn.github.io/canvas-context/) and its [source](index.html) with a Worker implementation.

## Installation

```bash
npm install canvas-context
```

## Usage

```js
import createCanvasContext from "canvas-context";

const { context, canvas } = createCanvasContext("2d", {
  width: 100,
  height: 100,
  offscreen: true,
});
```

## API

<!-- api-start -->

## Modules

<dl>
<dt><a href="#module_createCanvasContext">createCanvasContext</a></dt>
<dd></dd>
</dl>

## Typedefs

<dl>
<dt><a href="#ContextType">ContextType</a> : <code>&quot;2d&quot;</code> | <code>&quot;webgl&quot;</code> | <code>&quot;experimental-webgl&quot;</code> | <code>&quot;webgl2&quot;</code> | <code>&quot;webgl2-compute&quot;</code> | <code>&quot;bitmaprenderer&quot;</code> | <code>&quot;gpupresent&quot;</code> | <code>&quot;webgpu&quot;</code></dt>
<dd><p>A DOMString containing the context identifier defining the drawing context associated to the canvas.</p>
</dd>
<dt><a href="#CanvasContextOptions">CanvasContextOptions</a> : <code>object</code></dt>
<dd><p>Options for canvas creation. All optional.</p>
</dd>
<dt><a href="#CanvasContextReturnValue">CanvasContextReturnValue</a> : <code>object</code></dt>
<dd></dd>
</dl>

<a name="module_createCanvasContext"></a>

## createCanvasContext

<a name="exp_module_createCanvasContext--createCanvasContext"></a>

### createCanvasContext([contextType], [options]) ⇒ [<code>CanvasContextReturnValue</code>](#CanvasContextReturnValue) ⏏

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu), optionally offscreen for possible use in a Worker.

**Kind**: Exported function

| Param         | Type                                                       | Default                     |
| ------------- | ---------------------------------------------------------- | --------------------------- |
| [contextType] | [<code>ContextType</code>](#ContextType)                   | <code>&quot;2d&quot;</code> |
| [options]     | [<code>CanvasContextOptions</code>](#CanvasContextOptions) | <code>{}</code>             |

<a name="ContextType"></a>

## ContextType : <code>&quot;2d&quot;</code> \| <code>&quot;webgl&quot;</code> \| <code>&quot;experimental-webgl&quot;</code> \| <code>&quot;webgl2&quot;</code> \| <code>&quot;webgl2-compute&quot;</code> \| <code>&quot;bitmaprenderer&quot;</code> \| <code>&quot;gpupresent&quot;</code> \| <code>&quot;webgpu&quot;</code>

A DOMString containing the context identifier defining the drawing context associated to the canvas.

**Kind**: global typedef
<a name="CanvasContextOptions"></a>

## CanvasContextOptions : <code>object</code>

Options for canvas creation. All optional.

**Kind**: global typedef
**Properties**

| Name                | Type                                                                                 | Default            | Description                            |
| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | -------------------------------------- |
| [width]             | <code>number</code>                                                                  | <code>300</code>   | Request an initial canvas width.       |
| [height]            | <code>number</code>                                                                  | <code>150</code>   | Request an initial canvas height.      |
| [offscreen]         | <code>boolean</code>                                                                 | <code>false</code> | Request an offscreen canvas.           |
| [worker]            | <code>boolean</code>                                                                 | <code>false</code> | Handle use in a worker.                |
| [contextAttributes] | <code>CanvasRenderingContext2DSettings</code> \| <code>WebGLContextAttributes</code> | <code>{}</code>    | Attributes to be passed to getContext. |
| [canvas]            | <code>HTMLCanvasElement</code>                                                       |                    | Canvas element to use.                 |

<a name="CanvasContextReturnValue"></a>

## CanvasContextReturnValue : <code>object</code>

**Kind**: global typedef
**Properties**

| Name    | Type                                                           |
| ------- | -------------------------------------------------------------- |
| canvas  | <code>HTMLCanvasElement</code> \| <code>OffscreenCanvas</code> |
| context | <code>RenderingContext</code>                                  |

<!-- api-end -->

## License

MIT. See [license file](LICENSE.md).

---
_Source: https://npm.io/package/canvas-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._