OpenCanvas

Reusable performance focused canvas built in TypeScript and on top of the latest web tech.

Browser Support

Feature	Desktop						Phone
Canvas	4	12	3.1	2	10	9	✔️	3.2	4
Canvas2D API	4	12	3.1	2	10	9	✔️	3.2	4
Web Workers	4	12	4	3.5	11.5	10	✔️	5	4
WebGL	8	12	5.1	4	12.1	11	✔️	8	4
WebGL 2.0	56	79	15	51	43	❌	✔️	15	7.2
OffscreenCanvas	69	79	17	105	64	❌	✔️	17	10.1
WebGPU	113	113	TP	63 🧪	99	❌	✔️	17.4 🧪	24
Support
Minimum	4	12	4	3.5	11.5	10	✔️	5	4
Full	113	113	TP	105	99	❌	✔️	17.4 🧪	24

ℹ️ Contains data provided by Can I use based on used technologies.
ℹ️ The numbers above represent the minimum browser versions supporting the specified feature.
ℹ️ Overall minimum support is met when the browser supports Canvas, Canvas2D API and Web Workers.
✔️ Supported    ❌ Not Supported    🧪 Experimental Support (requires additional configuration)

Installation

npm

npm install @adamsarek/opencanvas --save

CDN

<link href="https://cdn.jsdelivr.net/npm/@adamsarek/opencanvas@latest/dist/opencanvas.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@adamsarek/opencanvas@latest/dist/opencanvas.js"></script>

Getting Started

1. Target Element

<canvas class="opencanvas"></canvas>

2. Create

const options = {};
const openCanvas = new OpenCanvas(options);

Options

Key	Value			Description
	Type	Expected	Default
selector	string string[]	CSS selector classList	'.opencanvas'	Select target element.
theme	string	'auto' | 'dark' | 'light'	'auto'	Choose a theme.

Functions

Function	Arguments				Return	Description
	Name	Type	Expected	Default	Type
create					void	Create OpenCanvas.