How to lay a new canvas over an existed canvas and destroy it after some seconds?

See more:

Javascript

As title.
I'm maintaining a system. I got a request that when I click on a line in a canvas, the line color changes for some seconds and changes back to original color. I searched and find a way to solve it is to create a new canvas over the old canvas, draw a line with new color in it, and make it disappear after some seconds. I tried it but failed:

var newcanvas = document.createElement("canvas");
                newcanvas.id = "newcanvas";
                newcanvas.style.top= canvas.style.top;
                newcanvas.style.left = canvas.style.left;
                newcanvas.style.width = canvas.style.width;
                newcanvas.style.height = canvas.style.height;
                newcanvas.style.position = "absolute";
                newcanvas.style.display = "block";
                document.getElementsByTagName("body")[0].appendChild(newcanvas);
                //change color
                var ctx = newcanvas.getContext("2d");
                ctx.strokeStyle="#FFFF00";
                for (var r = 0; r < linePoints.length - 1; r += 1) {
                    ctx.moveTo(linePoints[r].x, linePoints[r].y);
                    ctx.lineTo(linePoints[r + 1].x, linePoints[r + 1].y);
                }
                ctx.stroke();
                //switch back in 4 seconds
                setTimeout(function () {
                    newcanvas = undefined;
                    runAnimation.value = false;
                }, 4000);

The new canvas appears at right side of the old canvas and is still there after 4 seconds. That isn't what I want. How could I make it?

What I have tried:

(code in my problem description)