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
4
votes
1 answer

Understanding offscreen canvas to better performance

Hey everyone so I have a very complex canvas editor that allows a user to pick a video background, add text, gifs and Lottie animations using the Konvajs and Gifler libraries. It has come a long way however I am trying to speed up the performance of…
codernoob8
  • 434
  • 1
  • 9
  • 24
3
votes
1 answer

Is there any explanation why when tab is hidden, Canvas stops receive frames from OffscreenCanvas drawImage in worker thread?

I have a video merger that gets different MediaStreamTrack from navigator.mediaDevices, Camera, and Display and sends them to a worker via MediaStreamTrackProcessor.reader which reads each stream frame by frame and draws into an OffscreenCanvas. So,…
Spleen
  • 2,656
  • 1
  • 10
  • 16
3
votes
1 answer

Is there a way to render an SVG string to an OffscreenCanvas in a web worker?

I am developing a web page that does some fairly heavy processing of SVG string data. Because these strings could get to be m/bs in size I would like to move the rendering of the SVGs (browser dependant) to a worker in order to avoid blocking the…
chips
  • 160
  • 1
  • 10
3
votes
1 answer

An OffscreenCanvas could not be cloned because it was detached

yesterday returned to my hobby with HTML canvas and tried to do a rendering in a separate thread, just to face the following error in the console: Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be…
1000Gbps
  • 1,455
  • 1
  • 29
  • 34
2
votes
1 answer

Is Bitmaprenderer supposed to work on OffscreenCanvas in a webworker?

I'm experimenting with using OffscreenCanvas in webworkers and trying various strategies. In my original code I'm drawing on multiple canvas elements (stacked on top of each other) sequentially in a single requestAnimationFrame and was looking to…
Kruptein
  • 25
  • 3
2
votes
0 answers

Why does switching from Canvas to OffScreenCanvas improve performance of drawImage and getImageData?

I am running a real-time process from the live media stream of the webcam, which requires the FPS to stay around 30FPS. getImageData was one of my main bottlenecks, it was requiring around 22ms to extract the ImageData object from the canvas,…
Noor
  • 51
  • 1
  • 6
2
votes
1 answer

Can't use offscreencanvas with react-three-fiber

I am using offscreencanvas (https://threejs.org/manual/#en/offscreencanvas) to render react-three-fiber elements on a separate thread. There are not a lot of resources about this on the internet (however I found this issue:…
Samuel
  • 111
  • 1
  • 10
2
votes
1 answer

Create an image in JavaScript's Web Worker (worker.js)

I'm rewritng a small javascript for being able to put it in a worker.js like it is documented here: Mozilla - Web_Workers_API The worker.js shall display an image on an OffscreenCanvas like it is documented here: Mozilla - OfscreenCanvas…
tonispark
  • 133
  • 2
  • 7
2
votes
0 answers

JavaScript failed to execute "transferControlToOffscreen"

I am trying to do below code for transferring canvas to worker: var mycanvas = document.getElementById('mycanvas'); var offscreenCanvas = mycanvas.transferControlToOffscreen(); // Uncaught InvalidStateError: Failed to execute…
User7723337
  • 11,857
  • 27
  • 101
  • 182
1
vote
1 answer

Web worker still janks main thread

I’m having a strange issue with a fairly complex ThreeJS scene. I’ve spent a few days moving the entire 3D scene to an offscreencanvas and I’ve moved the loading of my GLB files and texture maps to a web worker. This all works and I’m able to render…
GeorgePorge
  • 71
  • 6
1
vote
1 answer

How to move image processing code entirely to web-worker

I want to transfer full control to worker and use off screen canvas. But there is an Image() which is tied to UI, see function makeImg. I am not intending to show the image, it has pure data usage for building a mesh. The highlighted code fully…
armagedescu
  • 1,758
  • 2
  • 20
  • 31
1
vote
0 answers

Convert 2 or more SVGs to PNG in JavaScript

I'm using the below code to convert 1 SVG to PNG. I convert the SVG to canvas to PNG. getDownloadURL = async () => { // Logic to convert SVG to PNG const svg = document.querySelector('#widget svg'), canvas = new…
codingrohtak
  • 160
  • 8
1
vote
1 answer

OFFSCREEN-CANVAS: How can I combine 2 different half circles that are in different canvas?

I have 2 half circles which are one is red and other is green. I want to combine them, how can I do that? I am adding my canvas codes: const canvas_ok = new OffscreenCanvas(16, 16) const context_ok = canvas_ok.getContext('2d') context_ok.arc(8, 8,…
Ceren Keklik
  • 291
  • 2
  • 11
1
vote
1 answer

Is it normal for an HTMLCanvasElement captured stream to lag on Chrome when the Canvas is hidden and drawn onto by its OffscreenCanvas in a web worker

Ok so the question is a bit much, but it actually mentions every part of the "bug" I'm experiencing. I'm not sure if it is really a bug or if there is something I don't understand yet. I created a demo on codepen to reproduce the weird…
Raphael Royer-Rivard
  • 2,252
  • 1
  • 30
  • 53
1
vote
1 answer

memory leak in JavaScript (WebWorker, Canvas, IndexedDB)

I need some help with finding a memory leak in a small, Browser / WebWorker JavaScript. I tracked it down into this little piece of code: /** * Resizes an Image * * @function scaleImage * @param {object} oImageBlob blob of…
HOK
  • 225
  • 1
  • 11
1
2 3