How to detect if mouse position is hovering

Question

I have this discussion which indicates how to make a pencil tool.

How can I detect whether the mouse is hovering on drawn area/points/images using the pencil tool? T

Answer 1

The only solution in your case is to save all drawn points into arrays, themselves saved in one array containing all your pathes :

• onmousedown : create a new path array.
• onmousemove:
  -- if drawing -> fill the currentPath's array with every drawn points.
  -- else -> check if the actual mouse coordinates are in any of your path arrays.

var ctx = canvas.getContext("2d"),
  painting = false,
  lineThickness = 1;

canvas.width = canvas.height = 600;

var dCanvas = canvas.cloneNode(true);
dCtx = dCanvas.getContext('2d');
pCanvas = canvas.cloneNode(true);
pCtx = pCanvas.getContext('2d');
dCtx.fillStyle = "#FFF";
pCtx.fillStyle = "red";
ctx.fillRect(0, 0, 600, 600);

var pathes = [],
  currentPath;

canvas.onmousedown = function(e) {
  currentPath = [];
  pathes.push(currentPath);
  painting = true;
};

canvas.onmouseup = function(e) {
  painting = false;
}

canvas.onmousemove = function(e) {
  pCtx.clearRect(0, 0, canvas.width, canvas.height);
  var mouseX = e.pageX - this.offsetLeft,
    mouseY = e.pageY - this.offsetTop;
  if (painting) {   
    var lastPoint = currentPath[currentPath.length-1] || {
      x: e.pageX - canvas.offsetLeft,
      y: e.pageY - canvas.offsetTop
    };
    var x1 = mouseX,
      x2 = lastPoint.x,
      y1 = mouseY,
      y2 = lastPoint.y;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep) {
      var x = x1;
      x1 = y1;
      y1 = x;

      var y = y2;
      y2 = x2;
      x2 = y;
    }
    if (x1 > x2) {
      var x = x1;
      x1 = x2;
      x2 = x;

      var y = y1;
      y1 = y2;
      y2 = y;
    }

    var dx = x2 - x1,
      dy = Math.abs(y2 - y1),
      error = 0,
      de = dy / dx,
      yStep = -1,
      y = y1;

    if (y1 < y2) {
      yStep = 1;
    }

    lineThickness = 5-Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)) / 10;
    if (lineThickness < 1) {
      lineThickness = 1;
    }

    for (var x = x1; x < x2; x++) {
      if (steep) {
        dCtx.fillRect(y, x, lineThickness, lineThickness);
        currentPath.push({x: y,y: x});
      } else {
        dCtx.fillRect(x, y, lineThickness, lineThickness);
        currentPath.push({x: x,y: y});
      }

      error += de;
      if (error >= 0.5) {
        y += yStep;
        error -= 1.0;
      }
    }
    currentPath.push({x: mouseX,y: mouseY});
  } else {
    pathes.forEach(function(path) {
      if (path.some(function(point) {
        return isBetween(mouseX, point.x, 5) && isBetween(mouseY, point.y, 5)
      })) {
        pCtx.beginPath();
        pCtx.arc(path[0].x+2.5, path[0].y+2.5, 5, 0, Math.PI*2);
        pCtx.fill();

        pCtx.beginPath();
        pCtx.arc(path[path.length-1].x+2.5, path[path.length-1].y+2.5, 5, 0, Math.PI*2);
        pCtx.fill();
      }
    });
  }
  ctx.fillRect(0, 0, 600, 600);
  ctx.drawImage(dCanvas, 0, 0);
  ctx.drawImage(pCanvas, 0, 0);
}

function isBetween(x, y, z) {
  return (x >= y - z && x <= y + z);
}

canvas {
  border: 1px solid
}