HTML5 Canvas Coordinates Chnged in chrome

Question

I have a Sharepoint page in which i want to show a hierarchical diagram with boxes.According to my requirement those boxes should work as links to other sharepoint pages in the same site.

Since sharepoint's default designer tools doesn't support designing such diagrams, I created a page with html5 canvas and the element i wanted inside that. Inside the canvas i created few boxes and lines to connect them.And i added texts inside the boxes.Then i used a mouse listener to check whether the mouse pointer hovers over a box and if so changed the pointer icon and the link to be redirected to.

I added the canvas tag inside the sharepoint page by "Edit Source" and i added the javascript part using 'Embed Code'

Now the code works perfectly in IE and Firefox. In chrome although the boxes,lines and text are drawn according to the coordinates i gave in the code but But when i hover the mouse over them it gives different coordinates for mouse listener in different browser sizes.So the mouse pointer doesn't change at correct locations ie: over the boxes.

This doesn't happen in firefox or IE. They changes the mouse pointer when it comes over the boxes and links to the pages perfectly.

Why does it change when i use chrome? And why does it only affect to the mouse listener coordinates.

This is the code i used.(I have removed the repetitive parts which draws other boxes) Same in jsfiddle

    ​<canvas id="myCanvas" height="500" width="960" style="border: 1px solid;">​<img src="" alt=""/> </canvas>​ 

<script>
var canvas = document.getElementById("myCanvas");
var ctx;

    var rNBDX = 50;     var rNBDY = 150;            
    var rectWidth = 200; 
    var rectHeight = 100;
    var cornerRadius = 20;

    var linkNBD="https://google.com";
    var textNBD1 ="Google"; 
    var linkHeight=20;
    var linkNum = 0;

function draw(){
  canvas = document.getElementById("myCanvas");
  if(canvas.getContext){

    ctx=canvas.getContext("2d");
    //Drawing Lines
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#000000';
    ctx.moveTo(380, 100);
    ctx.lineTo(380, 125);
    ctx.stroke();

    //Drawing Rectangles
    ctx.fillStyle="#0b61d0";
    ctx.strokeStyle="#0b61d0";
    ctx.lineJoin = "round";
    ctx.lineWidth = cornerRadius;

    ctx.strokeRect(rNBDX+(cornerRadius/2), rNBDY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    ctx.fillRect(rNBDX+(cornerRadius/2), rNBDY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);

    //Drawing the Texts
    ctx.font='24px Segoe UI Light';
    ctx.fillStyle = "#FFFFFF";  
    ctx.fillText(textNBD1,(rNBDX+rectWidth/2)-(ctx.measureText(textNBD1).width)/2,rNBDY+rectHeight/2);

    //Add mouse listeners
    canvas.addEventListener("mousemove", on_mousemove, false);
    canvas.addEventListener("click", on_click, false);
  }
}

function on_mousemove (ev) {
  var x, y;

  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  }
  x-=canvas.offsetLeft;
  y-=canvas.offsetTop;

  if(x>=rNBDX && x <= (rNBDX + rectWidth) && y>=rNBDY && y<= (rNBDY+rectHeight)){
      document.body.style.cursor = "pointer";
      linkNum=1;
  }
  else{
      document.body.style.cursor = "";
  }
}
function on_click(e) { 
  switch (linkNum)
    {
    case 1:
        window.location = linkNBD;
        break;
    }
}
draw();
</script>

Answer 1

Try adjusting the mouse coordinates like this:

function on_mousemove (ev) {

  var x, y,
      rect = canvas.getBoundingClientRect();

  x = ev.clientX - rect.left + 1;
  y = ev.clientY - rect.top + 1;
  ...

You will have to add (as in the example) the width of the left/top border though as getBoundingClientRect does not include those (you can calculate this dynamically using getComputedStyle and getPropertyValue of that for the borders).