https://github.com/trentmwillis/ez-offscreen-canvas

A small library to make it easier to use OffscreenCanvas in a Web Worker
https://github.com/trentmwillis/ez-offscreen-canvas

canvas javascript offscreencanvas webworker

Last synced: 6 days ago
JSON representation

A small library to make it easier to use OffscreenCanvas in a Web Worker

• Host: GitHub
• URL: https://github.com/trentmwillis/ez-offscreen-canvas
• Owner: trentmwillis
• License: mit
• Created: 2019-07-27T04:29:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T00:13:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-27T10:45:14.855Z (19 days ago)
• Topics: canvas, javascript, offscreencanvas, webworker
• Language: HTML
• Homepage: https://pretty-okay.dev/ez-offscreen-canvas
• Size: 162 KB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ez-offscreen-canvas

[![CircleCI Build Status](https://circleci.com/gh/trentmwillis/ez-offscreen-canvas/tree/master.svg?style=svg)](https://circleci.com/gh/trentmwillis/ez-offscreen-canvas/tree/master)

This is a tiny library to make it easier to use [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). In particular, it does the following:

1. Creates the `OffscreenCanvas` instance from a given `` element.

2. Passes the `OffscreenCanvas` and other values from the main thread to a `Worker` thread.

3. Allows you to write your `Worker` code in the main thread as a function.

4. Falls back to running in the main thread if `OffscreenCanvas` is not supported.

Here's a short example of how it is used:

```html

   import { ezOffscreenCanvas } from 'https://unpkg.com/ez-offscreen-canvas';

  const canvas = document.querySelector('canvas');

  const props = { color: 'red' };

  // The code in this function will run in a Web Worker

  // which means it can't access variables in the closure

  const render = ({ canvas, color }) => {

    const context = canvas.getContext('2d');

    const draw = () => {

      context.fillStyle = color;

      context.fillRect(0, 0, canvas.width, canvas.height);

      requestAnimationFrame(draw);

    };

    draw();

  };

  const offscreenCanvas = ezOffscreenCanvas(canvas, props, render);

  // Since control has been transferred to an OffscreenCanvas

  // we can't set attributes on the original canvas directly

  offscreenCanvas.setAttributes({ width: 700, height: 350 });

  // Make sure we cleanup the Web Worker when no longer needed

  setTimeout(offscreenCanvas.terminate, 10000);

```

See [the above code running live on CodePen](https://codepen.io/trentmwillis/pen/LwyZQW).

## Requiring OffscreenCanvas in a Web Worker

If you only want the render function to run if `OffscreenCanvas` is available and can run in a Web Worker, then pass an options hash with `workerOnly` set to `true` as the fourth argument to the `ezOffscreenCanvas` method:

```javascript

ezOffscreenCanvas(canvas, props, render, { workerOnly: true });

```