If you want, and there are numerous ways, set up a custom protocol handler (sorry, 'scheme handler'), i.e. 'data://', when the Canvas has finished its loop of 'whatever' get it to (effectively) Post the Data to the handler using JavaScript in Base64 ('canvas.toDataURL();'), you decode, do the 'whatever', then bing bang bong rinse and repeat and then everything is (should be) synchronised (within reason). You need to set it up and stick to a reasonable framerate, the refresh rate of the Monitor'll do,, unless you have a RTX4090XT 3000i SUX
Anyway have fun with it
Oh. PNG's only have one render quality, and they're free of artefacts, JPG can get pretty mashie really and they have no decent Alpha channel available for further compositing. Edit, just did a side by side comparison, at the 'default' quality JPG is in deed mashie when compared to the same image in PNG
Oh. So basically the 'scheme handler' (or whichever is the fastest route you decide) does 'whatever' and dumps the result back to the Canvas, the Canvas does 'whatever' and dumps the result back to the scheme hander (or whatever), which dumps 'whatever' back to the Canvas, which dumps it back to the ... ad nauseum. And frames are generated as fast as the Canvas renders and the scheme handler (or whichever mechanism you choose) can pick up and process the result back and trigger the next iteration. I guess it's at least a decent exercise in seeing / measuring just how fast you can get out of this tight loop