Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu) for use in PEX.
npm install pex-gl
import createRenderingContext, { FALLBACKS } from "pex-gl";
// Creates a webgl context filling the window
const context = createRenderingContext();
// Creates a webgl context from an existing canvas and keeps its size
const context = createRenderingContext({ canvas });
// Creates a webgl context on a new canvas with given width and height
const context = createRenderingContext({ width, height });
// Creates a new canvas of type "webgpu"
const context = createRenderingContext({ type: "webgpu" });
// Creates a new canvas of type "webgl" or fallback to experimental-webgl in case it fails
const context = createRenderingContext({ type: "webgl" });
// Disable fallbacks for "webgl2"
FALLBACKS.webgl2 = [];
// Creates a new canvas of type "webgl2" and return null in case it fails
const context = createRenderingContext({ type: "webgl2" });
- PexGLOptions :
object
Options for context creation. All optional.
- pex-gl
- .FALLBACKS
- .default([opts]) ⇒
RenderingContext
Context fallbacks map
Kind: static constant of pex-gl
Creates a rendering context.
Kind: static method of pex-gl
Param | Type | Default |
---|---|---|
[opts] | PexGLOptions |
{} |
Options for context creation. All optional.
Kind: global typedef Properties
Name | Type | Default | Description |
---|---|---|---|
[width] | number |
window.innerWidth |
Request an initial canvas width. |
[height] | number |
window.innerHeight |
Request an initial canvas height. |
[pixelRatio] | boolean |
1 |
Multiply canvas dimensions with a given ratio. |
[fullscreen] | boolean |
!opts.width && !opts.height |
Make the canvas fullscreen. |
[type] | "2d" | "bitmaprenderer" | "webgl" | "webgl2" | "webgpu" |
"webgl" |
A "contextType" for getContext. |
[element] | HTMLElement |
document.body |
Element to append the canvas to. |
[...contextAttributes] | CanvasRenderingContext2DSettings | WebGLContextAttributes |
{} |
Attributes to be passed to getContext. |
MIT. See license file.