4 ms·

I implemented my suggestion: https://hikari.noyu.me/etc/2023-05-24-js-canvas-software-color-replacement/ https://hikari.noyu.me/etc/2023-05-24-js-canvas-softwar

I implemented my suggestion: https://hikari.noyu.me/etc/2023-05-24-js-canvas-software-color-replacement/ https://hikari.noyu.me/etc/2023-05-24-js-canvas-software-col... It seems that doing this per-pixel loop on the CPU in JS is slow, but it's not too bad: the first click might take 300ms, subsequent clicks are just 100ms. While this is about ten times slower than I was hoping, it's still fast enough to seem responsive to most users. This is also at 4K resolution, because I wanted a realistic worst-case. It's much faster at 1080p since it has four times less pixels to work with. You could of course do better with WebGL.

shaneos 3y ago
Very nice - yes that's quite quick and definitely uses less memory. When I tested it on an older iPad and on an Android device the difference in speed between the two approaches is a bit more obvious. Watching my kids bash away at this and expect it to keep up makes me more willing to use extra memory to do so. All that said though, I really like your implementation, it would likely be the right choice for a lot of use cases
- TazeTSchnitzel 3y ago
  Thanks! By the way, I realised just now I was leaving a bit of performance on the table: getImageData() is slow, but I don't need to do it on click, I can do it just once after loading the image. Changing that gets it to be consistently under 100ms for clicks after the first one.