getting mouse position with javascript within canvas

by

I see plenty of question on this subject and all propose to browse DOM or use offsetX and offsetY, which are not always set right.

You should use the function: canvas.getBoundingClientRect() from the canvas API.

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);
  }, false);

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. How do I add a simple onClick event handler to a canvas element?
  5. Get pixel color from canvas, on mousemove
  6. Why does canvas.toDataURL() throw a security exception?
  7. Zoom Canvas to Mouse Cursor
  8. How to add image to canvas
  9. Zoom in on a point (using scale and translate)
  10. how to save canvas as png image?
  11. Does HTML5/Canvas Support Double Buffering?
  12. Uploading ‘canvas’ image data to the server
  13. html 5 canvas LineTo() line color issues
  14. HTML5 Canvas camera/viewport – how to actually do it?
  15. Is it possible to programmatically detect size limit for data url?
  16. How to resize html canvas element?
  17. How do I rotate a single object on an html 5 canvas?
  18. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  19. Detect if user clicks inside a circle
  20. addEventListener for keydown on Canvas
  21. How to determine the intended frame-rate on an html video element
  22. How to save canvas animation as gif or webm?
  23. Drawing rotated text on a HTML5 canvas
  24. canvas.toDataURL() Security Error The operation is insecure
  25. clearing circular regions from HTML5 Canvas
  26. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  27. Snap edges of objects to each other and prevent overlap
  28. Image Manipulation – add image with corners in exact positions
  29. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment