CODEWITHSUNDEEP
javascriptcanvaswebweb-worker
Alastair
Alastair

Reputation: 6114

Smart alternatives to using <canvas> methods inside a Web Worker?

I am attempting to improve the draw speed of this JS heatmap library:

http://www.patrick-wied.at/static/heatmapjs/

With a view to getting animation to work. An abridged version of how it works- it draws all the data points (on a <canvas> that is never inserted into the DOM) as circles- all the same radius, but with varying alphas:

ctx.shadowColor = ('rgba(255,0,0,'+((count)?(count/me.store.max):'0.1')+')');
ctx.beginPath();
ctx.arc(x - 1000, y - 1000, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

Once they're all drawn, it runs getImageData() on that canvas, colorizing each pixel according to alpha, and then putImageData()-ing it on the final <canvas> that's present on the page.

Not surprisingly, the most intensive part of that operation is the drawing part. I'd love to be able to delegate that responsibility to a web worker, so that I could render future frames in advance without affecting the FPS in the browser. But web workers do not have DOM access, and cannot create <canvas> tags. Does anyone have any great ideas on ways around this? Is there any way that I can calculate these pixel alphas without a canvas tag?

Upvotes: 1

Views: 640

Answers (1)

TheCrzyMan
TheCrzyMan

Reputation: 1030

Unfortunately, it is currently impossible to pass any DOM, or otherwise non-transferable object, such as a canvas, to a web worker.

However, you can pass the image data to a worker. The worker can manipulate the data in order to emulate the shadow making with the gradient and such, and then pass it back for the putImageData()-ing. I'm not sure how fun that would be though. I know I am having a rough time emulating the current product. However, that is my current recommendation if you intend to delegate to a worker.

EDIT: And by a rough time, I mean this.

EDIT Again: I know that this is really behind, but you could also save some time by only grabbing the area that would be potentially affected, instead of grabbing and replacing the whole canvas.

Edit again again: haven't tried it, but if you can make a canvas while in the worker, you could just send instructions to it, let it draw, and then send back the image

EDIT 2022-02-15: You can do this now

Upvotes: 2

Related Questions