Stack Overflow
Stack Overflow

Questions tagged [offscreen-canvas]

Use this tag for questions related to the OffcreenCanvas web API.

Just like the HTMLCanvasElement, the OffscreenCanvas API offers a way to draw graphics, make photo compositions, create animations, and do real-time video processing or rendering.
This API differs from the HTMLCanvasElement in that it is not hooked by a DOM node, and can thus live in a Web Worker. This offers the advantage of both producing complex graphics without blocking the main UI thread, and to be able to run animation smoothly even when the main thread is blocked.

Specifications: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

32 questions
1
vote
1 answer

Problem terminating several Web Workers using offscreen canvas

I'm a beginner using web workers and I'm dealing with a little problem. I'm creating several workers to process audio buffers and draw its waveform on a offscreen canvas: main thread: // foreach file let worker = new Worker('js/worker.js'); let…
franco.stramana
  • 53
  • 6
1
vote
1 answer

Send offscreencanvas to webworker more than once

I want to be able to send my canvas offscreen to a webworker more than once. Here's an example code: render() { const worker = new Worker("some url"); const offscreen = this.canvasRef.current.transferControlToOffscreen(); …
Will
  • 1,718
  • 3
  • 15
  • 23
1
vote
1 answer

Is 'bitmaprenderer' not a valid value for off-screen canvas rendering context in Chrome?

While drawing bitmap image onto off-screen canvas, Chrome console threw an error on me: Failed to execute 'getContext' on 'OffscreenCanvas': The provided value 'bitmaprenderer' is not a valid enum value of type OffscreenRenderingContextType. The…
That's me - who else
  • 59
  • 1
  • 7
0
votes
0 answers

OffscreenCanvas + ThreeJS issue on Safari

I'm having a strange issue with a ThreeJS scene in an OffscreenCanvas, but only with Safari. I create the OffscreenCanvas with this code: let canvasElm = g('avatar-canvas'); const offscreen =…
GeorgePorge
  • 71
  • 6
0
votes
1 answer

Firefox cannot drawImage from an offscreen canvas controlled by a worker

I tried to transfer an image drawn to an offscreen canvas by a web worker to a visible canvas. It works in Chrome, but not in Firefox. No error was thrown in the console, but the visible canvas remains blank. Below is my complete program…
Qiyun Zhu
  • 125
  • 1
  • 8
0
votes
0 answers

WebGL with offscreen canvas won't render my vertices

I'm trying to do some behind the scenes rendering work with WebGL and then copy the canvas data to an image. I'm able to accomplish this successfully with a physical canvas element on the page, however, once I try to replace my const canvas =…
Benjamin Kosten
  • 361
  • 2
  • 12
0
votes
1 answer

captureStream from transferred canvas not working in firefox

Let's say I have a canvas: I can capture a video from it using captureStream. So if I have a video element, I can pass it the captured stream and see whatever I draw mirrored in the video:
0
votes
1 answer

Issues with web worker Implementation in Echartjs "Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type."

can anyone help me to implement a web worker? Main Code: dataset = "dataset" + document.getElementById("dataset").value const config = { xAxis: { type: 'category', data: Object.keys(window[dataset]) }, …
Yash Chauhan
  • 174
  • 13
0
votes
1 answer

Generate action icon from svg image?

I'm trying make my action icon dynamic by manipulating it with offscreenCanvas(): service_worker.js const iconFile = `icon.png`; const canvas = new OffscreenCanvas(24, 24), ctx = canvas.getContext("2d"); fetch(iconFile) .then(r =>…
vanowm
  • 9,466
  • 2
  • 21
  • 37
0
votes
1 answer

how can i use web audio api with offscreen canvas?

As is known, we can't access the dom element from the workers. When I create AudioContext: var audioCtx = new (canvas.AudioContext || canvas.webkitAudioContext)(); I get: Uncaught ReferenceError: window is not defined Is there any way to walk…
badcode
  • 581
  • 1
  • 9
  • 28
0
votes
1 answer

Offscreen-Canvas not rendering some of the time

I am trying to implement a in browser raster drawing plugin for the leaflet library that that extends the leaflets GridLayer api. Essentially for every tile there is function createTile that returns a canvas with some drawing on it. and leaflet…
Nazmul Ahasan
  • 34
  • 1
  • 8
0
votes
1 answer

Convert HTML to PDF Using OffScreenCanvas in React

OK so the question is self-explanatory. Currently, I am doing the following Using html2canvas npm package to convert my html to canvas. Converting Canvas to image canvas.toDataURL("image/png"); Using jsPDF to create a pdf using this…
Maaz Ahmad Khan
  • 142
  • 1
  • 11
0
votes
0 answers

I want to draw in a Worker thread using OffscreenCanvas

The process is sent to the webworker according to the conditions in a loop as follows. while () { 　if (~~~) { 　worker.postMessage({ action: "init", data: offscreenCanvas }, [offscreenCanvas]); 　} ・・・ 　if (~~~) { 　worker.postMessage({ action:…
yir
  • 11
  • 1
0
votes
0 answers

Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was detached

I'm trying to run multiple instances of my web worker. But I'm getting the following error in browser console : core.js:4081 ERROR DOMException: Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was…
iJade
  • 23,144
  • 56
  • 154
  • 243
0
votes
0 answers

TypeScript: Creating offscreen canvas inside webworker

I have Angular project that has generated web-worker with attached canvas to it using transferControlToOffscreen. Everything went well until I needed to create another OffscreenCanvas inside the web-worker. Now the build is throwing TS2304: Cannot…
Igor Vinogradov
  • 23
  • 2
  • 4
1
2
3