ritz078
Use a hidden canvas in memory to paint to avoid jank
So I played with this app a bit. To support OffScreenCanvas, I tried using an in-memory canvas (not drawn on the main screen) to draw and copy it to main screen. I think it mostly works, but somehow I see long continuous bars and not exact notes. I'm guessing it's not able to reset the buffer canvas. Attached an image.
Will update this.
This pull request is being automatically deployed with ZEIT Now (learn more). To see the status of your deployment, click below or on the icon next to each commit.
🔍 Inspect: https://zeit.co/ritz078/synth/fh28wueo6 🌍 Preview: https://synth-git-fork-ankeetmaini-no-offscreen.ritz078.now.sh
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
I think it's okay now, let me know when you've sometime to look at this, I'll remove the hardcodings to always force into non offscreencanvas support.
You can check the prod build of this PR at https://synth-git-fork-ankeetmaini-no-offscreen.ritz078.now.sh
Let me know if you are not able to open it.
In case you had trouble on opening the app on browsers other than chrome, take a master pull.
Our first priority here is making this work on the main thread but in case that doesn't work (highly likely), I think that we can use the same logic in a worker and render on the main canvas after doing the calculations on a offscreen canvas. Might improve the performance even further.
For that we can create a OffscreenCanvas in the worker and do all the rendering on it. after everything for a single frame is done, we can draw the image on the main canvas (whose access we already have in the canvas).
I did some profiling, and I think main thread is busy because of something in Keyboard.ts, the profile showed that the browser is doing a lot in terms of recalc and layout too. Will do a deep dive this weekend.
I'm trying improve the profile perf on this with some trial & error experiments. I'll let you know when this is ready for review.