Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 26 days ago
JSON representation

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

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. |

## CanvasContextReturnValue : object

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

| Name | Type |
| ------- | -------------------------------------------------------------- |
| canvas | HTMLCanvasElement \| OffscreenCanvas |
| context | RenderingContext |

## License

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