HTML5 Canvas: Is it possible to take a screenshot of the canvas when an object changes without lag?

Question

JavaScript

I am writing an application where there is a workspace (canvas, and working with elements in it - pictures, text) and there is a slide panel.
The idea is this: When a slide is created, a canvas appears, it is working with elements, adding, moving, rotating, etc. and every time I change the canvas, I take a screenshot of it and immediately substitute the dataUrl of the screenshot in the slide panel, in the active slide. It turns out a live preview, similar to how in Google presentations.
Everything works, but there is one unpleasant nuance: when taking a screenshot of the canvas, for example, if the element moves (and the screenshot is taken every time the canvas is changed), then it lags.
Can you please tell me if there is any way to solve this problem?

Answer 1

Everything is simple.
To take a screenshot - it takes time: T1
To redraw the scene/object - it takes time: T2
But to make a copy of the canvas region - it takes time T3.
To summarize: T1>T2>T3
1. Get the desired region from the visual scene (game canvas) into a variable
2. Create a new canvas object in memory (without placing it in the DOM!)
3. Copy it into it image from variable
4. Save where needed
Copying - here .
After you pick up the fragment, immediately switch to asynchronous mode by passing the save to the worker. Well, save each frame (60fps) - I do not advise, if possible.