How to clear trails when drawing rectangles on an HMTL5 canvas

Question

I am currently working on an application where I draw a rectangle on a canvas. I can draw the rectangle perfectly but then when I try to change the movement of the mouse to make the rectangle smaller there are trails that are left behind. How do I clear these trails when I make the rectangle's size smaller? below is my JavaScript code that I used. Thanks in advance.

 function drawSquare() {
    // creating a square
    var w = lastX - startX;
    var h = lastY - startY;
    var offsetX = (w < 0) ? w : 0;
    var offsetY = (h < 0) ? h : 0;
    var width = Math.abs(w);
    var height = Math.abs(h);

    context.beginPath();
    context.rect(startX + offsetX, startY + offsetY, width, height);
    context.fillStyle = "gold";
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    context.stroke();
    canvas.style.cursor = "default";
}

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: e.pageX - canvas.offsetLeft,
        y: e.pageY - canvas.offsetTop,
    };
}

function handleMouseDown(e) {

    // get mouse coordinates
    mouseX = parseInt(e.pageX - offsetX);
    mouseY = parseInt(e.pageY - offsetY);
    // set the starting drag position
    lastX = mouseX;
    lastY = mouseY;

    isDown = true;

    if (isChecBoxClicked == true) {
        mouseIsDown = 1;
        startX = lastX;
        startY = lastY;
        var pos = getMousePos(canvas, e);

        startX = lastX = pos.x;
        startY = lastY = pos.y;

        drawSquare();

    }
    else {
        canvas.style.cursor = "default";
    }
}

function handleMouseUp(e) {
    // clear the dragging flag
    isDown = false;
    canvas.style.cursor = "default";
    // get mouse coordinates
    mouseX = parseInt(e.pageX - offsetX);
    mouseY = parseInt(e.pageY - offsetY);
    // set the starting drag position
    lastX = mouseX;
    lastY = mouseY;

    if (isChecBoxClicked == true)
    {
        canvas.style.cursor = "crosshair";

        if (mouseIsDown !== 0) {
            mouseIsDown = 0;
            var pos = getMousePos(canvas, e);
            lastX = pos.x;
            lastY = pos.y;
            drawSquare();
        }
    }
}

function handleMouseMove(e) {

    // if we're not dragging, exit
    if (!isDown) {
        return;
    }

    //if (defaultval == 1) {
    //    return;
    //}

    if (isChecBoxClicked == true) {
        canvas.style.cursor = "crosshair";

        if (mouseIsDown !== 0) {

            var pos = getMousePos(canvas, e);
            lastX = pos.x;
            lastY = pos.y;
            drawSquare();
        }         
    }
}

Answer 1

A canvas doesn't clear itself. At least not a 2D context, like you are using. If you keep drawing on it, the new graphics is placed on top of the old. You need to explicitly clear it:

context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

You will probably have to clear your canvas. If you are only drawing a square you will have to do that in the drawSquare function. If you are drawing multiple things you will have to do it in a higher function that redraws multiple things.

For clearing the whole canvas, you can use the following code:

context.clearRect ( 0 , 0 , canvas.width, canvas.height );

There are also a lot of canvas libraries that will manage this for you and optimize the areas redrawn (they might only clear a part of the canvas, so there are less pixels redrawn)