@spearwolf/offscreen-display

helpers for creating custom offscreen canvas elements

0.1.2
latest
npm

Version published: 9 months ago

Maintainers: 1

Created: 9 months ago

Source

@spearwolf/offscreen-display

npm (scoped)

A minimal javascript library that makes it pretty easy for you to create a custom element that creates an offline canvas in a web worker and renders it in the animation frame loop of the browser.

Whether webgl, webgpu or 2d context is up to the user, the class takes care of the synchronization of the element dimension and rendering of the frames.

📖 How To

1. Install

➜ npm i -D @spearwolf/offscreen-display

To get started quickly, vite is recommended, but this is purely optional and a matter of taste.

2. Create custom element

awesome-display.js

import {OffscreenDisplay} from '@spearwolf/offscreen-display';

class AwesomeDisplay extends OffscreenDisplay {
  createWorker() {
    return new Worker(new URL('awesome-display-worker.js', import.meta.url), {
      type: 'module',
    });
  }
}

customElements.define('awesome-display', AwesomeDisplay);

3. Integrate the element in your page

index.html

<html>
  <body>
    <awesome-display></awesome-display>
    <script type="module" src="awesome-display.js"></script>
  </body>
</html>

3. Create your worker

awesome-display-worker.js

import {OffscreenWorkerDisplay} from '@spearwolf/offscreen-display/worker.js';

const display = new OffscreenWorkerDisplay();

let ctx = null;

display.on({
  onCanvas({canvas}, contextAttributes) {
    ctx = canvas.getContext('2d', contextAttributes);
  },

  onFrame({now, canvasWidth: w, canvasHeight: h}) {
    ctx.clearRect(0, 0, w, h);
  },
});

self.addEventListener('message', (evt) => {
  display.parseMessageData(evt.data);
});

4. More features available

There are other features not listed here. For a complete example, see the rainbow line element.

Copyright and License

The source code and npm package is licensed under the Apache-2.0 License.

have fun! 🚀🌱

CHANGELOG

`v0.1.2`

add JSDocs to OffscreenDisplay class

FAQs

What is @spearwolf/offscreen-display?

Is @spearwolf/offscreen-display well maintained?

Package last updated on 28 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install