WebGLPlot

The main class for the webgl-plot library

Hierarchy

• WebGLPlot

Index

Constructors

• constructor

Properties

• debug
• gOffsetX
• gOffsetY
• gScaleX
• gScaleY
• gXYratio
• lines

Methods

• addLine
• clear
• popLine
• update

Constructors

constructor

+ new WebGLPlot(canvas: HTMLCanvasElement | OffscreenCanvas, debug?: boolean): WebGLPlot

Defined in src/webglplot.ts:64

Create a webgl-plot instance

example

For HTMLCanvas

const canvas = dcoument.getEelementbyId("canvas");

const devicePixelRatio = window.devicePixelRatio || 1;

canvas.width = canvas.clientWidth * devicePixelRatio;

canvas.height = canvas.clientHeight * devicePixelRatio;

const webglp = new WebGLplot(canvas);

...

example

For OffScreenCanvas

const offscreen = htmlCanvas.transferControlToOffscreen();

offscreen.width = htmlCanvas.clientWidth * window.devicePixelRatio;

offscreen.height = htmlCanvas.clientHeight * window.devicePixelRatio;

const worker = new Worker("offScreenCanvas.js", { type: "module" });

worker.postMessage({ canvas: offscreen }, [offscreen]);

Then in offScreenCanvas.js

onmessage = function (evt) {

const wglp = new WebGLplot(evt.data.canvas);

...

}

Parameters:

Name	Type	Description
canvas	HTMLCanvasElement | OffscreenCanvas	the canvas in which the plot appears
debug?	boolean	(Optional) log debug messages to console

Returns: WebGLPlot

Properties

debug

• debug: boolean = false

Defined in src/webglplot.ts:64

log debug output

---

gOffsetX

• gOffsetX: number

Defined in src/webglplot.ts:48

Global horizontal offset

default = 0

---

gOffsetY

• gOffsetY: number

Defined in src/webglplot.ts:54

Global vertical offset

default = 0

---

gScaleX

• gScaleX: number

Defined in src/webglplot.ts:30

Global horizontal scale factor

default = 1.0

---

gScaleY

• gScaleY: number

Defined in src/webglplot.ts:36

Global vertical scale factor

default = 1.0

---

gXYratio

• gXYratio: number

Defined in src/webglplot.ts:42

Global X/Y scale ratio

default = 1

---

lines

• lines: WebglBaseLine[]

Defined in src/webglplot.ts:59

collection of lines in the plot

Methods

addLine

▸ addLine(line: WebglBaseLine): void

Defined in src/webglplot.ts:189

adds a line to the plot

example

const line = new line(color, numPoints);

wglp.addLine(line);

Parameters:

Name	Type	Description
line	WebglBaseLine	this could be any of line, linestep, histogram, or polar

Returns: void

---

clear

▸ clear(): void

Defined in src/webglplot.ts:173

Returns: void

---

popLine

▸ popLine(): void

Defined in src/webglplot.ts:240

remove the last line

Returns: void

---

update

▸ update(): void

Defined in src/webglplot.ts:138

updates and redraws the content of the plot

Returns: void