Pex-gl NPM | npm.io

pex-gl

Create a RenderingContext (2d, webgl, webgl2, bitmaprenderer, webgpu) for use in PEX.

Installation

npm install pex-gl

Usage

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" });

API

Constants

Functions

Typedefs

FALLBACKS

Context fallbacks map

Kind: global constant

createRenderingContext(opts) ⇒ RenderingContext

Creates a rendering context.

Kind: global function

Param	Type	Default
opts	Options	{}

Options : object

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.