Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/dmnsgn/canvas-context
- Owner: dmnsgn
- License: mit
- Created: 2019-02-04T21:10:11.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-07-06T15:18:29.000Z (6 months ago)
- Last Synced: 2024-11-22T16:39:34.984Z (about 1 month ago)
- Topics: 2d, bitmaprenderer, canvas, context, experimental-webgl, gpupresent, offscreen, webgl, webgl2, worker
- Language: HTML
- Homepage: https://dmnsgn.github.io/canvas-context/
- Size: 1.53 MB
- Stars: 13
- Watchers: 3
- Forks: 1
- 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
## 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.
## 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).