Detect if Mouse is over an object inside canvas - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

Detect if Mouse is over an object inside canvas

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*from   w w w. j  a  v  a  2  s  . c om*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var $hit=$("#hit");
    var tolerance=5;

    var line={x0:50,y0:50,x1:100,y1:100};
    ctx.fillStyle="red";
    draw(line);
    function draw(line,mouseX,mouseY,lineX,lineY){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(line.x0,line.y0);
        ctx.lineTo(line.x1,line.y1);
        ctx.stroke();
        if(mouseX && lineX){
            ctx.beginPath();
            ctx.arc(lineX,lineY,tolerance,0,Math.PI*2);
            ctx.closePath();
            ctx.fill();
        }
    }
    function linepointNearestMouse(line,x,y) {
        lerp=function(a,b,x){ return(a+x*(b-a)); };
        var dx=line.x1-line.x0;
        var dy=line.y1-line.y0;
        var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);
        var lineX=lerp(line.x0, line.x1, t);
        var lineY=lerp(line.y0, line.y1, t);
        return({x:lineX,y:lineY});
    };
    function handleMousemove(e){
      e.preventDefault();
      e.stopPropagation();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      if(mouseX<line.x0 || mouseX>line.x1){
          $hit.text("Outside");
          draw(line);
          return;
      }
      var linepoint=linepointNearestMouse(line,mouseX,mouseY);
      var dx=mouseX-linepoint.x;
      var dy=mouseY-linepoint.y;
      var distance=Math.abs(Math.sqrt(dx*dx+dy*dy));
      if(distance<tolerance){
          $hit.text("Inside the line");
          draw(line,mouseX,mouseY,linepoint.x,linepoint.y);
      }else{
          $hit.text("Outside");
          draw(line);
      }
    }
    $("#canvas").mousemove(function(e){handleMousemove(e);});
}); 

      </script> 
   </head> 
   <body> 
      <h2 id="hit">Move mouse near line</h2> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials