52 questions
0
votes
0
answers
51
views
videoElement freezes or glitches in WebKit WebView
I'm experiencing an issue in a WebKit WebView environment where a videoElement either freezes or shows corrupted frames.
I'm using @mediapipe/tasks-vision to perform face-detection-based data ...
1
vote
1
answer
153
views
Why my code behave differently with transferControlToOffscreen or new OffscreenCanvas?
I’m trying to use a web-worker to render a scene with threejs. I want to render some dynamic font using a CanvasTexture. But I find that when I use canvas in web-worker from ...
- 35
-1
votes
1
answer
74
views
Create a Canvas inside a Worker
I know about [HTMLCanvasElement trransferControlToOffscreen()], this works well.
But I need several Canvases for compositing operations.
Is it possible to create canvas inside a worker without ...
- 11
0
votes
0
answers
88
views
Worker + OffscreenCanvas synchronization problems
With Javascript, I want to render heavy vector graphics. Upon zoom, the whole content should be re-rendered. To achieve it in a visually smooth way, I tried 3 solutions with Web Workers:
Two UI ...
- 426
1
vote
0
answers
164
views
Webworker offscreen-canvas performance issues
I have two canvases inside the body of an HTML-file. I access the first canvas normally from an main thread script and perform an animation with requestAnimationFrame. The second canvas should draw ...
- 54
3
votes
1
answer
103
views
Android Canvas is not rendering on a TextureSurface bound to a Framebuffer
My goal is to be able to leverage the GPU in a background thread to create an offscreen image that is rendered using the Skia Canvas class. Ideally I would have liked to use Compose multiplatform and ...
0
votes
2
answers
81
views
Why are scaleWidth and scaleHeight unusually large in the canvg options?
My code snippet produces the output I want...well close.
However, I am struggling to understand why scaleWidth and scaleHeight needed to be 400.
My goal was to have the SVG drawn with a width & ...
- 796
0
votes
1
answer
49
views
How can I draw an SVG over what already exists in a canvas?
What I am trying to do is draw the SVG over the blue circle on the canvas. The blue circle should be the background.
However, the result is just the SVG.
The final result should look something like
(...
- 796
0
votes
1
answer
60
views
How can I change the color of the svg?
I am using canvg inside of a Web Worker to draw an SVG into an OffscreenCanvas.
I will draw the SVG in black. Is it possible to apply a color to the SVG without modifying the SVG itself or using CSS? ...
- 796
2
votes
2
answers
118
views
Which Algorithm Does Chrome/Firefox Use in context.drawImage()?
The specs say:
When scaling up, if the imageSmoothingEnabled attribute is set to false, then the image must be rendered using nearest-neighbor interpolation.
So when imageSmoothingEnabled is false ...
- 45
1
vote
1
answer
110
views
Android : drawing on canvas from another canvas, bad performance
I have a custom view where in onDraw(Canvas canvas), I need to draw on offscreen canvas, then draw the bitmap of offscreen canvas on view's canvas.
Here the code in the view class :
Bitmap bitmap = ...
- 721
0
votes
0
answers
156
views
Using OffscreenCanvas to resize image inside webworker not working for webkit on playwright
I want some clientside image compression using a webworker. My code is already working on my local machine (FF, Chrome, Safari).
Its e2e-tested with playwright 1.44.0. Running the tests locally ...
- 844
0
votes
1
answer
194
views
How to use matter.js on a web worker?
I want to use matter.js on a web worker with offscreen canvas, but the problem is it seems to throw errors about requestAnimationFrame. It tries to get it by using window.requestAnimationFrame but in ...
- 44.5k
1
vote
0
answers
240
views
Returning ImageBitmaps from a webworker to the main thread creates lag spikes
context: I am using a mapping library called openglobus to render a 3d planet. Openglobus has a tile layer, where you can give a function that generates tiles, that function can return canvasses. So ...
- 352
2
votes
1
answer
792
views
Offscreen Canvas in Web Worker not Updating when Editing Rendering Context
context: I am using a mapping library called openglobus to render a 3d planet. Openglobus has a tile layer, where you can give a function that generates tiles, that function can return canvasses. So ...
- 352
0
votes
1
answer
342
views
Trouble Rendering Dynamic Texture from OffscreenCanvas in Three.js Shader
I'm working on a React Three Fiber project where I'm trying to render a dynamic texture from an OffscreenCanvas that's being updated in a WebWorker. However, all I'm getting is a black render on my ...
- 141
1
vote
0
answers
91
views
How to integrate OffscreenCanvas in dygraph with web worker
Pure canvas can handle with OffscreenCanvas and web worker technology.
<!-- index.html -->
<canvas id="mainCanvas" width="300" height="150"></canvas>
//...
- 43
1
vote
1
answer
463
views
Web Worker Offscreen Canvas toBlob latency
I have a hidden canvas in a react app that I send to a web worker using transferControlToOffscreen (code).
Everything is working, but after updating the canvas (fillRect for example) the worker ...
- 36
1
vote
0
answers
267
views
put mapbox-gl in a worker and read with readpixels() to encode in the main thread
This is the first time I've asked a question on Stackoverflow and it's because I really got stuck. I have an animation in mapbox, which runs on the same thread as the h264-mp4-encoder video encoder. ...
- 11
1
vote
1
answer
624
views
Slow vector tiles off screen canvas rendering with Openlayers
There's an example on Openlayers website:
https://openlayers.org/en/latest/examples/offscreen-canvas.html
It works fine but when I try to add an additional tile layer (XYZ or WMS) to the map, the ...
- 13
0
votes
1
answer
1k
views
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 = ...
- 135
2
votes
1
answer
969
views
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 ...
- 135
1
vote
1
answer
566
views
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 ...
- 175
2
votes
1
answer
796
views
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 ...
- 25
2
votes
1
answer
1k
views
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 ...
- 2,417
-2
votes
1
answer
121
views
Send message from webworker and wait for reply
I am currently working with webworker and canvas for the first time and have a question about it.
I have a webpage that needs to draw multiple elements on a canvas. When the canvas is full I want to ...
- 79
0
votes
0
answers
322
views
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, ...
- 391
0
votes
1
answer
960
views
captureStream from transferred canvas not working in firefox
Let's say I have a canvas:
<canvas height="500" width="500"></canvas>
I can capture a video from it using captureStream.
So if I have a video element, I can pass it ...
- 13.1k
3
votes
1
answer
790
views
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 ...
- 2,856
0
votes
1
answer
764
views
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: '...
- 376
0
votes
1
answer
510
views
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....
- 10.4k
2
votes
0
answers
2k
views
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 ...
- 51
1
vote
0
answers
106
views
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....
- 170
2
votes
1
answer
3k
views
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 (...
- 113
1
vote
1
answer
219
views
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 = ...
- 311
7
votes
1
answer
2k
views
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 ...
- 300
1
vote
1
answer
1k
views
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 ...
- 2,252
0
votes
1
answer
548
views
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: ...
- 610
0
votes
1
answer
1k
views
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 ...
1
vote
1
answer
1k
views
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 ...
- 277
2
votes
1
answer
6k
views
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 ...
- 143
0
votes
1
answer
1k
views
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("...
- 172
0
votes
0
answers
190
views
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 }, [...
- 11
2
votes
0
answers
1k
views
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 ...
- 12k
0
votes
0
answers
3k
views
Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was detached [duplicate]
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 ...
- 23.9k
1
vote
1
answer
863
views
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
...
0
votes
0
answers
1k
views
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-...
0
votes
2
answers
2k
views
OffScreenCanvas and touch events
I'm trying to use the new API for the OffScreenCanvas. The idea is to move all logic regarding drawing and updating data for player, but leave some other logic in the main thread, like touch events (...
- 1,521
6
votes
1
answer
16k
views
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 ...
- 900
1
vote
1
answer
3k
views
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....
- 1,768