Open Technical Blog: HTML5 Canvas - Detect Mouse Position

This script shows how to capture the mouse positions and mouse click within a HTML5 canvas. In addition, a hotspot polygon (should be convex) object defined can be used as a generic object for other project. More than one hotspot polygon can be defined in the same canvas.
To test the code, move the mouse over the following area, click anywhere as you wish.

For the following code to function properly in Firefox, you should add style="position: relative;" in the <canvas> tag.

Source Code

<script type="text/javascript">

// hotspot polygon
var hotpoly = function(){
  var obj = {
    rowarr : [],  // (x, y, sgn)
    // methods
    // Add points to polygon
    // pRow - (xi, yi, sgn(i-1,i))
    addRow: function(pRow){
      obj.rowarr.push(pRow); },

    // Check whether a point is 
    // in the hotspot polygon
    inPoly: function(px,py){
      if (obj.rowarr.len<3){
        return false; }
      mInside = true;
      for (var mi=0;mi<obj.rowarr.length;mi++){
        mj = mi+1;
        if (mi==obj.rowarr.length-1) {
          mj = 0; };
        mx1=obj.rowarr[mi][0];
        my1=obj.rowarr[mi][1];
        mx2=obj.rowarr[mj][0];
        my2=obj.rowarr[mj][1];
        ms12=obj.rowarr[mj][2];
        mf00=-mx1*my2+mx2*my1;
        mfab=(px-mx1)*(my2-my1)-(mx2-mx1)*(py-my1);
        if (mf00*mfab*ms12<=0){
          mInside=false;
          break; }};
      return mInside;
      },

    // Draw the hotspot polygon
    drawPoly: function(pCtx, pFillColor){
      pCtx.beginPath();
      pCtx.moveTo(obj.rowarr[0][0],obj.rowarr[0][1]);
      for (var mi=1;mi<obj.rowarr.length;mi++){
        pCtx.lineTo(obj.rowarr[mi][0],obj.rowarr[mi][1]); }
      pCtx.closePath();
      if (pFillColor=='blank'){
        pCtx.lineWidth=1;
        pCtx.strokeStyle = "black";
        pCtx.stroke(); }
      else {
        pCtx.lineWidth=0;
        pCtx.fillStyle = pFillColor;
        pCtx.fill(); }
    }
  };
  return obj;
}

var canvas;
var ctx;
var msx = 0;   // mouse x
var msy = 0;   // mouse y
var WIDTH = 0;
var HEIGHT = 0;
var mbutt = false; // mouse button

// library functions

function clear() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
}


// main function
function init() {
  canvas = document.getElementById("canv01");
  ctx = canvas.getContext("2d");
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
  canvas.onmousemove = myMove;
  // define hotspot polygon
  mHP1 = hotpoly();
  mHP1.addRow([50,100,-1]);
  mHP1.addRow([120,190,1]);
  mHP1.addRow([250,130,1]);
  mHP1.addRow([130,30,1]);
  mHP1.addRow([60,50,-1]); 
  return setInterval(draw, 20);
}

function draw() {
  clear();
  // text
  ctx.font = "bold 10pt Sans-Serif";
  ctx.fillStyle = "black";
  ctx.fillText("x: "+msx, 20, 20);
  ctx.fillText("y: "+msy, 90, 20);
  // detect whether mouse lies in hotspot polygon
  if (mHP1.inPoly(msx,msy)) {
    ctx.fillText("Mouse over polygon.", 180, 40);
    mHP1.drawPoly(ctx,'red');    // hotspot polygon
    minPoly = true;
  } else {
    mHP1.drawPoly(ctx,'blank');  // hotspot polygon
    minPoly = false;
  }
  if (mbutt) {
    ctx.fillStyle = "black";
    ctx.fillText("Mouse clicked.", 180, 20);
  }      
}

// event handlers
function myDown(e){
  mbutt = true;
}

function myMove(e){
  if (e.offsetX != undefined) {
    msx = e.offsetX;
    msy = e.offsetY; }
  else {
    msx = e.layerX;
    msy = e.layerY;
  }
}

function myUp(){
  mbutt = false;
}

init();

</script>

Open Technical Blog

Wednesday, 10 October 2012

HTML5 Canvas - Detect Mouse Position

Source Code

No comments:

Post a Comment