HTML5 Canvas line draw between two clicks, live

Question

You might see that this is my first post so excuse any beginner mistakes using stackoverflow.

I'm currently working on a floor plan web app where you can simply draw lines to create the floor plan of your housing.

The wanted effect is: When clicking once the user draws a temporary line where the start point X is the clicked point and the target point Z is the mouse which the user can move around. I'm currently using canvas for this effect but somehow the line is invisible or just not there. I've tried some debugging which brought me here.

This is the current code:

function drawLineXY(fromXY, toXY) {
  if (!lineElem) {
    lineElem = document.createElement('canvas');
    lineElem.style.position = "absolute";
    lineElem.style.zIndex = 100;
    document.body.appendChild(lineElem);
    console.log("Added line element");

  }
  var leftpoint, rightpoint;
  if (fromXY.x < toXY.x) {
    leftpoint = fromXY;
    rightpoint = toXY;
  } else {
    leftpoint = toXY;
    rightpoint = fromXY;
  }

  var lineWidthPix = 4;
  var gutterPix = 0;
  var origin = {
    x: leftpoint.x - gutterPix,
    y: Math.min(fromXY.y, toXY.y) - gutterPix
  };
  lineElem.width = "1000px";
  lineElem.height = "1000px";
  lineElem.style.left = "0px";
  lineElem.style.top = "0px";
  var ctx = lineElem.getContext('2d');
  // Use the identity matrix while clearing the canvas
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, lineElem.width, lineElem.height);
  ctx.restore();
  ctx.lineWidth = 4;
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
  ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
  ctx.stroke();
  console.log("drawing line..");
}

function moveHandler(evt) {
  var startCentre, startBounds;
  var targets = [];

  if (clicked.length === 2) {
    targets = clicked;
  } else if (clicked.length === 1) {
    targets.push(clicked[0]);
    if (typeof hoverElement !== 'undefined') {
      targets.push(hoverElement);
    }
  }

  if (targets.length == 2) {
    var start = {
      x: targets[0],
      y: targets[0]
    };
    var end = {
      x: targets[1],
      y: targets[1]
    };
    drawLineXY(start, end);

  } else if (targets.length == 1) {
    var start = {
      x: targets[0],
      y: targets[0]
    };

    drawLineXY(start, {
      x: evt.clientX,
      y: evt.clientY
    });
  }
};

function clickHandler(e) {
  if (clicked.length == 2) {
    clicked = [];
  }
  clicked.push(e.target);
};

document.onclick = clickHandler;
document.onmousemove = moveHandler;

    

As you can see in drawLineXY's last line I've made a debug console log "drawing line" This works as I move the mouse around. Like it should. But there is no line, does someone has help?

PS: #canvas is specified in style.css.

Answer 1

I created a very basic example of probably what you are trying to achieve:

 let c, ctx, fromXY, toXY; window.onload = function(){ document.onclick = clickHandler; document.onmousemove = moveHandler; c = document.getElementById("myCanvas"); ctx = c.getContext("2d"); reset(); } function draw(){ clear(); ctx.beginPath(); ctx.moveTo(fromXY.x, fromXY.y); ctx.lineTo(toXY.x, toXY.y); ctx.stroke(); ctx.closePath(); } function clear(){ ctx.clearRect(0, 0, c.width, c.height); } function reset() { fromXY = {}; toXY = {}; } function moveHandler(e) { if(typeof fromXY.x !== "undefined"){ toXY.x = e.clientX; toXY.y = e.clientY; draw(); } } function clickHandler(e) { if(typeof fromXY.x === "undefined"){ fromXY.x = e.clientX; fromXY.y = e.clientY; }else{ reset(); } }

 <canvas id="myCanvas" height="500" width="500"></canvas>

You can set line options in the draw() function, and if you want the lines to persist, you would save their fromXY and toXY in an array and redraw them as well.