How does canvas work when drawing individual shapes?

Question

JavaScript

Hello.
I draw ordered figures on canvas. Each individual figure can be moved around the canvas (using DnD).

While moving the figure, the entire canvas is completely redrawn (as far as I understand), which is not effective for performance.
If I create an additional canvas element and during the animation I draw a single figure in it, and in the previous canvas (where all the figures are), I use clearRect on a certain area where the previously defined figure was placed before moving and at the end of the animation, redraw the entire main host.
Please clarify whether I am thinking correctly in this direction or how canvas works from the inside if I change at least one pixel on the canvas (it actually redraws the entire canvas or only one pixel)?
Thank you!

Answer 1

Most of the answers I found here