Change color lines in canvas when mouseover

Question

I have some lines in canvas. I want each single line change color when the mouseover that line but I have some issues with this problem.

Is there any JS library to help me solve this problem?

Can you help me? Thanks

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 400;
var height = 400;

for(i=0; i<120 ;i+=15){
  context.beginPath();
  context.moveTo(90+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();
}

for(i=0; i<120 ;i+=15){
  context.beginPath();
  context.moveTo(300+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();
}

//blue
for(i=0; i<100 ;i+=15){
  context.beginPath();
  context.moveTo(200+i, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#AECD49';
  context.stroke();
}

function detectLine(x, y) {
   console.log(x, y);
   var imageData = context.getImageData(0, 0, width, height),
    inputData = imageData.data,
    pData = (~~x + (~~y * width)) * 4;
   if (inputData[pData + 3]) {
     return true;
     context.strokeStyle = '#28B9A2';
   }

 return false;
}

canvas.addEventListener("mousemove", function(e){
    var x  = e.pageX,
        y = e.pageY;
    detectLine(x, y);
});

Answer 1

First you need to store the paths of all the lines in an array.

var xTopFromLine = [];

for(i=0; i<120 ;i+=15){
  var xTop = 90+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();

  xTopFromLine.push([xTop]);
}

for(i=0; i<120 ;i+=15){
  var xTop = 300+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#28B9A2';
  context.stroke();

  xTopFromLine.push([xTop]);
}

//blue
for(i=0; i<100 ;i+=15){
  var xTop = 200+i;
  context.beginPath();
  context.moveTo(xTop , 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = '#AECD49';
  context.stroke();

  xTopFromLine.push([xTop]);
}

After that you can create an empty line in the exact position of each of your colored lines, like this:

//emptyLine
function emptyLine( xTop){
  context.beginPath();
  context.moveTo(xTop, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
}
//single colored Line
function drawSingleLine( xTop, color){
  context.beginPath();
  context.moveTo(xTop, 0);
  context.lineTo(250, 400);
  context.lineWidth = 1;
  context.strokeStyle = color;
  context.stroke();
}

And check if your mouse is over the "ghost line" you have just created.

canvas.addEventListener("mousemove", function(e){

  for(i=0; i<xTopFromLine.length; i++){
    var x  = e.pageX,
        y = e.pageY;

     emptyLine(xTopFromLine[i]);
     if (context.isPointInStroke(x, y)) {
        drawSingleLine(xTopFromLine[i], 'blue');
     }

  }

});

You can check the jsFiddle I created (I did some refactorizations): https://jsfiddle.net/laia89/6wtLper3/