I use the same kind of approach to generate exports. It works great for exports up to around 2 times the size of the original but after that fails as especially Chrome tends to cut off certain parts.
If I use your sketch and export at base values, it looks great:
But when I bump that up to a higher ratio of export (in this case 6 times the base resolution) Chrome (and other browsers) cut off certain parts:
This varies on the aspect ratio / resolution but I have found that to be true for all of my sketches and projects where I tried to implement this.
While trying to debug this I tried to use promises and timeouts for the actual rendering to make sure the frame is ready when exporting, using various options for the renderer (like setting “preserveDrawingBuffer” to true) and stopping requestAnimationFrame to make sure nothing overlaps but nothing seems to solve that.
If someone has any idea how to create “real” high resolution exports that would be a tremendous help!