Холст отстает каждый раз, когда я рисую одно и то же?

Question

Я возился с тэгом canvas, создавая кучу прямоугольников, которые я могу щелкнуть и перетащить, но после 4 или 5 раз перетаскивания canvas начинает сильно отставать, есть что-то, чего мне не хватает?

Первый раз, когда вы перемещаете его, он идеален, но все остальное не так гладко.

Может быть, я не правильно очищаю холст, но есть ли другой способ лучше?

$(document).on("mousedown", '#myCanvas', () => {
    mouseDown = true;
    $(document).on("mousemove", (event) => {
        if (mouseDown) {
            if (mouseX && mouseY) {

                // Clear the canvas
                canvasCtx.save();
                canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
                canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
                canvasCtx.restore();

                // Translate to new x & y
                canvasCtx.translate((canvasX + (event.pageX - mouseX)), (canvasY + (event.pageY - mouseY)));

                                // Fill with previous generated rectangles
                for (let i = 0; i < boxes.length; i++) {
                    canvasCtx.fillStyle = boxes[i].color;
                    canvasCtx.fillRect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
                }

                // Paint
                canvasCtx.stroke();

            }

            // Get last mouse movement
            mouseX = event.pageX;
            mouseY = event.pageY;
        }
    })
})

Я создал JSFiddle

Answer 1

Просто возьмите mouseLove EventListener из мыши вниз EventListener, как mouseup.Я не знаю, но, кажется, это сработало