当我移动鼠标时，如何用 HTML 画布绘制一条简单的直线？

Question

I want to draw a straight line along with my mouse movement. I got it working. But the issue is the canvas.stroke is redrawing lines over and over as I move the mouse. What is the workaround for this? I just want one line not overlays of multiple lines.

Here is the mousemove listener:

canvasElement.onmousemove = (e) => {
            if (!started) return;
            context.beginPath();

            context.globalCompositeOperation = "multiply"; //<<<<
            context.globalAlpha = 0.05;
            context.lineWidth = size;
            context.strokeStyle = color;
            context.lineJoin = "round";
            context.lineCap = "round";
            context.moveTo(prvX, prvY);
            var dx = e.offsetX - prvX;
            var dy = e.offsetY - prvY;
            if (Math.abs(dx) > Math.abs(dy)) {
                context.lineTo(e.offsetX, prvY);
            } 
            context.stroke();
            context.closePath();
        };

Answer 1

As soon as you drawn something eg a line over something that has previously drawn onto your canvas eg an image, the resulting pixeldata stored for your canvas is a combination of the old and the new data. That means you can't simply remove a semi-transparent line from it without destroying what was drawn below as well.

One solution would be using two independent canvases of the same size and at the same on-screen position. The canvas in the background holds your original image data and the canvas on top is used to draw the line. That way you can simply erase the top-canvas before drawing a new line.

In your case that might not work however as you're using a different globalCompositeOperation to draw the line. In this case I'd recommend storing the data of your canvas in a second canvas as soon as you've clicked on the 'painting' canvas for the first time. This way you can simply restore the data before drawing the line.

For example:

 let canvasElement = document.getElementById("canvas"); let context = canvasElement.getContext("2d"); let started = false; let size = 7; let color = "red" let prvX = 0; let prvY = 0; let image = new Image(); let backupCanvas = document.createElement("canvas"); let backupCanvasContext = backupCanvas.getContext("2d"); backupCanvas.width = canvasElement.width; backupCanvas.height = canvasElement.height; let backupCreated = false; image.crossOrigin = "anonymous"; image.onload = () => { context.drawImage(image, 0, 0, canvasElement.width, canvasElement.height); } image.src = `https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/${canvasElement.width}/${canvasElement.height}`; canvasElement.onmousedown = (e) => { if (!backupCreated) { backupCanvasContext.drawImage(canvasElement, 0, 0, canvasElement.width, canvasElement.height); backupCreated = true; } started = true; prvX = e.offsetX; prvY = e.offsetY; } canvasElement.onmouseup = (e) => { started = false; } canvasElement.onmousemove = (e) => { if (!started) return; context.globalCompositeOperation = "source-over"; context.drawImage(backupCanvas, 0, 0, canvasElement.width, canvasElement.height); context.beginPath(); context.globalCompositeOperation = "multiply"; //<<<< context.globalAlpha = 1; context.lineWidth = size; context.strokeStyle = color; context.lineJoin = "round"; context.lineCap = "round"; context.moveTo(prvX, prvY); var dx = e.offsetX - prvX; var dy = e.offsetY - prvY; if (Math.abs(dx) > Math.abs(dy)) { context.lineTo(e.offsetX, prvY); } context.stroke(); context.closePath(); };

 <canvas id="canvas" width="300" height="200"></canvas>