Canvas drawing multiple lines instead of one javascript

Question

So I want user to be able to draw line, I want it something like this,

But I also want him to draw multiple lines separated so I removed this line:

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

But when I do that I got this

Here is my code:

//Canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

//constiables
// const canvasx = $(canvas).offset().left;
// const canvasy = $(canvas).offset().top;
let canvasx = canvas.offsetLeft;
let canvasy = canvas.offsetTop;
let last_mousex = (last_mousey = 0);
let mousex = (mousey = 0);
let mousedown = false;

//Mousedown
canvas.addEventListener("mousedown", function (e) {
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);
  mousedown = true;
});

//Mouseup
canvas.addEventListener("mouseup", function (e) {
  mousedown = false;
});

//Mousemove
canvas.addEventListener("mousemove", function (e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(last_mousex, last_mousey);
    ctx.lineTo(mousex, mousey);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.stroke();
  }
  //Output
  document.querySelector("#output").innerHTML =
    "current: " +
    mousex +
    ", " +
    mousey +
    "<br/>last: " +
    last_mousex +
    ", " +
    last_mousey +
    "<br/>mousedown: " +
    mousedown;
});

<canvas id="canvas"></canvas>

<div id="output"></div>

Answer 1

If I understand what you want correctly, this is because you are setting the last_mousex and last_mousey ONLY when the user presses down.

You do not update it every time they move, so the moment they click the "origin" is locked to that position. And then is never updated in sequential draws.

To fix this just move the last_mouseX/Y from here

//Mousedown
canvas.addEventListener("mousedown", function (e) {
  last_mousex = parseInt(e.clientX - canvasx); // remove this 
  last_mousey = parseInt(e.clientY - canvasy); // and this
  mousedown = true;
});

to right after where you render the line:

canvas.addEventListener("mousemove", function (e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(last_mousex, last_mousey);
    ctx.lineTo(mousex, mousey);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.stroke();
  }

  //right here! 
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);