Saturday, March 2, 2013

HTML5 mousemove example (get the mouse coordinates)

The code below shows how to get the mouse coordinates. The code is a complete html file that runs in a browser. 

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="150" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 var mx=0;
 var my=0;
 gameloop = setInterval(doGameLoop,16);
 window.addEventListener("mousemove",mm,true);
 function doGameLoop(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillText("mx:"+mx+" my:"+my,10,10);   
 }
 function mm(evt){
  var rect = c.getBoundingClientRect();
  mx = evt.clientX - rect.left;
  my = evt.clientY - rect.top;
 }

</script></body></html>

No comments:

Post a Comment