Are all mouse draggable objects in HTML5 canvas based on setInterval?

Question

I am making a geometrical optics demo in HTML5 canvas, the mouse points the light source, you can craft some barriers, javascript do the calculation work and display light and shadow on on a line behind those barriers.

from those canvas drag'n'drop tutorials I found online, all of them are using setInterval() to make mouse interactions happen, which means the whole canvas is updated and re-painted all the time. This makes me feel the whole canvas business is an ugly hack.

My question is: are there any other way to make mouse interactions in canvas without the setInterval() way? I want to paint the background once and only redraw the moving part while onmousemove when the mouse is actually moving.

Any idea is appreciated. Thanks :)

Answer 1

You can redraw the canvas without the element being dragged, then draw the element to a new canas on top of the base. Then you can use absolute positioning to move the one being dragged without any redrawing.