5 ms·
Note that Chrome also builds on Skia, via the Blink rendering engine. So Skia is very well aligned with the needs of the Canvas API. As for performance, Window
by joaodasilvaz 5y ago
Note that Chrome also builds on Skia, via the Blink rendering engine. So Skia is very well aligned with the needs of the Canvas API.
As for performance, Window.js has a bit less overhead since it doesn't have a DOM and doesn't implement web security.
On the other hand, Chrome is widely used and has a super talented team that knows systems programming, GPU programming, etc in a lot of depth and have spent a ton of time optimizing web APIs. So I wouldn't be surprised if Chrome and Electron have better performance in benchmarks -- this is definitely something to measure!
As an example, this p5js example runs very slowly on Window.js:
https://p5js.org/examples/simulate-smokeparticles.html https://p5js.org/examples/simulate-smokeparticles.html
The reason is that it's doing something like a getPixel(x, y) call in a loop, which Chrome somehow optimizes; in Window.js this is going to be a roundtrip to the GPU for each pixel, which is extremely expensive.
(IMO, the right way to implement getPixel based on the Canvas API would be to read all the pixels once via canvas.getImageData)
- Matheus28 5y agoI don't remember very much, but have you tried making a SkImage snapshot on the first call to getImageData (and calls to drawImage that use that canvas), and just reusing that? I think it might do its own caching when you read pixels from it Also invalidate the snapshot on any calls that invalidate the contents of the snapshot of course (stroke, fill, drawImage, fillRect, strokeRect... probably a couple others). I have also reimplemented the canvas 2d api using skia for my own stuff.
- Matheus28 5y agoAh also I think you don't need to flush before makeImageSnapshot