{"id":15536794,"url":"https://github.com/trentmwillis/ez-offscreen-canvas","last_synced_at":"2025-04-23T14:32:02.292Z","repository":{"id":35041217,"uuid":"199115451","full_name":"trentmwillis/ez-offscreen-canvas","owner":"trentmwillis","description":"A small library to make it easier to use OffscreenCanvas in a Web Worker","archived":false,"fork":false,"pushed_at":"2022-12-11T00:13:06.000Z","size":166,"stargazers_count":14,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T06:37:54.680Z","etag":null,"topics":["canvas","javascript","offscreencanvas","webworker"],"latest_commit_sha":null,"homepage":"https://pretty-okay.dev/ez-offscreen-canvas","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trentmwillis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-27T04:29:39.000Z","updated_at":"2024-10-12T01:44:57.000Z","dependencies_parsed_at":"2023-01-15T12:35:38.528Z","dependency_job_id":null,"html_url":"https://github.com/trentmwillis/ez-offscreen-canvas","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fez-offscreen-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fez-offscreen-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fez-offscreen-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fez-offscreen-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trentmwillis","download_url":"https://codeload.github.com/trentmwillis/ez-offscreen-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250451915,"owners_count":21432924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","javascript","offscreencanvas","webworker"],"created_at":"2024-10-02T11:53:31.131Z","updated_at":"2025-04-23T14:32:02.265Z","avatar_url":"https://github.com/trentmwillis.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ez-offscreen-canvas\n\n[![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)\n\nThis 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:\n\n1. Creates the `OffscreenCanvas` instance from a given `\u003ccanvas\u003e` element.\n2. Passes the `OffscreenCanvas` and other values from the main thread to a `Worker` thread.\n3. Allows you to write your `Worker` code in the main thread as a function.\n4. Falls back to running in the main thread if `OffscreenCanvas` is not supported.\n\nHere's a short example of how it is used:\n\n```html\n\u003ccanvas\u003e\u003c/canvas\u003e\n\n\u003cscript type=\"module\"\u003e\n   import { ezOffscreenCanvas } from 'https://unpkg.com/ez-offscreen-canvas';\n\n  const canvas = document.querySelector('canvas');\n  const props = { color: 'red' };\n\n  // The code in this function will run in a Web Worker\n  // which means it can't access variables in the closure\n  const render = ({ canvas, color }) =\u003e {\n    const context = canvas.getContext('2d');\n\n    const draw = () =\u003e {\n      context.fillStyle = color;\n      context.fillRect(0, 0, canvas.width, canvas.height);\n\n      requestAnimationFrame(draw);\n    };\n\n    draw();\n  };\n\n  const offscreenCanvas = ezOffscreenCanvas(canvas, props, render);\n\n  // Since control has been transferred to an OffscreenCanvas\n  // we can't set attributes on the original canvas directly\n  offscreenCanvas.setAttributes({ width: 700, height: 350 });\n\n  // Make sure we cleanup the Web Worker when no longer needed\n  setTimeout(offscreenCanvas.terminate, 10000);\n\u003c/script\u003e\n```\n\nSee [the above code running live on CodePen](https://codepen.io/trentmwillis/pen/LwyZQW).\n\n## Requiring OffscreenCanvas in a Web Worker\n\nIf 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:\n\n```javascript\nezOffscreenCanvas(canvas, props, render, { workerOnly: true });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fez-offscreen-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrentmwillis%2Fez-offscreen-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fez-offscreen-canvas/lists"}