https://github.com/dmnsgn/canvas-context

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, gpupresent), optionally offscreen for possible use in a Worker.
https://github.com/dmnsgn/canvas-context

2d bitmaprenderer canvas context experimental-webgl gpupresent offscreen webgl webgl2 worker

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dmnsgn/canvas-context
• Owner: dmnsgn
• License: mit
• Created: 2019-02-04T21:10:11.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2025-09-15T21:17:37.000Z (6 months ago)
• Last Synced: 2025-09-17T04:00:08.044Z (6 months ago)
• Topics: 2d, bitmaprenderer, canvas, context, experimental-webgl, gpupresent, offscreen, webgl, webgl2, worker
• Language: HTML
• Homepage: https://dmnsgn.github.io/canvas-context/
• Size: 1.54 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

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

## Modules



createCanvasContext





## Typedefs





ContextType : "2d" | "webgl" | "experimental-webgl" | "webgl2" | "webgl2-compute" | "bitmaprenderer" | "gpupresent" | "webgpu"





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





CanvasContextOptions : object





Options for canvas creation. All optional.





CanvasContextReturnValue : object









## createCanvasContext



### createCanvasContext([contextType], [options]) ⇒ [CanvasContextReturnValue](#CanvasContextReturnValue) ⏏

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

**Kind**: Exported function

| Param         | Type                                                       | Default                     |

| ------------- | ---------------------------------------------------------- | --------------------------- |

| [contextType] | [ContextType](#ContextType)                   | "2d" |

| [options]     | [CanvasContextOptions](#CanvasContextOptions) | {}             |



## ContextType : "2d" \| "webgl" \| "experimental-webgl" \| "webgl2" \| "webgl2-compute" \| "bitmaprenderer" \| "gpupresent" \| "webgpu"

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

**Kind**: global typedef



## CanvasContextOptions : object

Options for canvas creation. All optional.

**Kind**: global typedef

**Properties**

| Name                | Type                                                                                 | Default            | Description                            |

| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | -------------------------------------- |

| [width]             | number                                                                  | 300   | Request an initial canvas width.       |

| [height]            | number                                                                  | 150   | Request an initial canvas height.      |

| [offscreen]         | boolean                                                                 | false | Request an offscreen canvas.           |

| [worker]            | boolean                                                                 | false | Handle use in a worker.                |

| [contextAttributes] | CanvasRenderingContext2DSettings \| WebGLContextAttributes | {}    | Attributes to be passed to getContext. |

| [canvas]            | HTMLCanvasElement                                                       |                    | Canvas element to use.                 |



## CanvasContextReturnValue : object

**Kind**: global typedef

**Properties**

| Name    | Type                                                           |

| ------- | -------------------------------------------------------------- |

| canvas  | HTMLCanvasElement \| OffscreenCanvas |

| context | RenderingContext                                  |

## License

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