UNPKG

canvas-context

Version:

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

github.com/dmnsgn/canvas-context

dmnsgn/canvas-context

124 lines (85 loc) • 6.37 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
# 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).