Real mouse position in canvas

Question

I m trying to draw with the mouse over a HTML5 canvas  but the only way that it seems to work well is if the canvas is in the position 0 0  upper left corner  if I change the canvas position  for some reason it doesn t draw like it should  Here is my code    function createImageOnCanvas imageId       document getElementById  imgCanvas   style display    block       document getElementById  images   style overflowY   hidden       var canvas   document getElementById  imgCanvas        var context   canvas getContext  2d        var img   new Image 300 300       img src   document getElementById imageId  src      context drawImage img   0   0       function draw e       var canvas   document getElementById  imgCanvas        var context   canvas getContext  2d        posx   e clientX      posy   e clientY      context fillStyle     000000       context fillRect  posx  posy  4  4       The HTML part    lt body gt    lt div id  images  gt    lt  div gt    lt canvas onmousemove  draw event   style  margin 0 padding 0   id  imgCanvas            class  canvasView  width  250  height  250  gt  lt  canvas gt     I have read there s a way of creating a simple function in JavaScript to get the right position  but I have no idea about how to do it

User · Answer

You can get the mouse positions by using this snippet:

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

This code takes into account both changing coordinates to canvas space (evt.clientX - rect.left) and scaling when canvas logical size differs from its style size (/ (rect.right - rect.left) * canvas.width see: Canvas width and height in HTML5).

Example: http://jsfiddle.net/sierawski/4xezb7nL/

Source: jerryj comment on http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

User · Answer

You need to get the mouse position relative to the canvas  To do that you need to know the X Y position of the canvas on the page     This is called the canvas   s    offset      and here   s how to get the offset    I   m using jQuery in order to simplify cross-browser compatibility  but if you want to use raw javascript a quick Google will get that too        var canvasOffset     canvas   offset        var offsetX canvasOffset left      var offsetY canvasOffset top    Then in your mouse handler  you can get the mouse X Y like this     function handleMouseDown e         mouseX parseInt e clientX-offsetX         mouseY parseInt e clientY-offsetY       Here is an illustrating code and fiddle that shows how to successfully track mouse events on the canvas   http   jsfiddle net m1erickson WB7Zu    lt  doctype html gt   lt html gt   lt head gt   lt link rel  stylesheet  type  text css  media  all  href  css reset css    gt   lt  -- reset css -- gt   lt script type  text javascript  src  http   code jquery com jquery min js  gt  lt  script gt    lt style gt      body  background-color  ivory        canvas border 1px solid red    lt  style gt    lt script gt    function         var canvas document getElementById  canvas        var ctx canvas getContext  2d         var canvasOffset     canvas   offset        var offsetX canvasOffset left      var offsetY canvasOffset top       function handleMouseDown e         mouseX parseInt e clientX-offsetX         mouseY parseInt e clientY-offsetY             downlog   html  Down     mouseX           mouseY             Put your mousedown stuff here             function handleMouseUp e         mouseX parseInt e clientX-offsetX         mouseY parseInt e clientY-offsetY             uplog   html  Up     mouseX           mouseY             Put your mouseup stuff here            function handleMouseOut e         mouseX parseInt e clientX-offsetX         mouseY parseInt e clientY-offsetY             outlog   html  Out     mouseX           mouseY             Put your mouseOut stuff here            function handleMouseMove e         mouseX parseInt e clientX-offsetX         mouseY parseInt e clientY-offsetY             movelog   html  Move     mouseX           mouseY             Put your mousemove stuff here                 canvas   mousedown function e  handleMouseDown e              canvas   mousemove function e  handleMouseMove e              canvas   mouseup function e  handleMouseUp e              canvas   mouseout function e  handleMouseOut e              end   function        lt  script gt    lt  head gt    lt body gt       lt p gt Move  press and release the mouse lt  p gt       lt p id  downlog  gt Down lt  p gt       lt p id  movelog  gt Move lt  p gt       lt p id  uplog  gt Up lt  p gt       lt p id  outlog  gt Out lt  p gt       lt canvas id  canvas  width 300 height 300 gt  lt  canvas gt    lt  body gt   lt  html gt

User · Answer

The easiest way to compute the correct mouse click or mouse move position on a canvas event is to use this little equation:

canvas.addEventListener('click', event =>
{
    let bound = canvas.getBoundingClientRect();

    let x = event.clientX - bound.left - canvas.clientLeft;
    let y = event.clientY - bound.top - canvas.clientTop;

    context.fillRect(x, y, 16, 16);
});

If the canvas has padding-left or padding-top, subtract x and y via:

x -= parseFloat(style['padding-left'].replace('px'));
y -= parseFloat(style['padding-top'].replace('px'));

User · Answer

The Simple 1 1 Scenario  For situations where the canvas element is 1 1 compared to the bitmap size  you can get the mouse positions by using this snippet   function getMousePos canvas  evt        var rect   canvas getBoundingClientRect        return         x  evt clientX - rect left        y  evt clientY - rect top            Just call it from your event with the event and canvas as arguments  It returns an object with x and y for the mouse positions   As the mouse position you are getting is relative to the client window you ll have to subtract the position of the canvas element to convert it relative to the element itself   Example of integration in your code     put this outside the event loop   var canvas   document getElementById  imgCanvas    var context   canvas getContext  2d     function draw evt        var pos   getMousePos canvas  evt        context fillStyle     000000       context fillRect  pos x  pos y  4  4       Note  borders and padding will affect position if applied directly to the canvas element so these needs to be considered via getComputedStyle   - or apply those styles to a parent div instead   When Element and Bitmap are of different sizes  When there is the situation of having the element at a different size than the bitmap itself  for example  the element is scaled using CSS or there is pixel-aspect ratio etc  you will have to address this   Example   function  getMousePos canvas  evt      var rect   canvas getBoundingClientRect       abs  size of element       scaleX   canvas width   rect width        relationship bitmap vs  element for X       scaleY   canvas height   rect height      relationship bitmap vs  element for Y    return       x   evt clientX - rect left    scaleX       scale mouse coordinates after they have     y   evt clientY - rect top    scaleY        been adjusted to be relative to element         With transformations applied to context  scale  rotation etc    Then there is the more complicated case where you have applied transformation to the context such as rotation  skew shear  scale  translate etc  To deal with this you can calculate the inverse matrix of the current matrix   Newer browsers let you read the current matrix via the currentTransform property and Firefox  current alpha  even provide a inverted matrix through the mozCurrentTransformInverted  Firefox however  via mozCurrentTransform  will return an Array and not DOMMatrix as it should  Neither Chrome  when enabled via experimental flags  will return a DOMMatrix but a SVGMatrix   In most cases however you will have to implement a custom matrix solution of your own  such as my own solution here - free MIT project  until this get full support   When you eventually have obtained the matrix regardless of path you take to obtain one  you ll need to invert it and apply it to your mouse coordinates  The coordinates are then passed to the canvas which will use its matrix to convert it to back wherever it is at the moment    This way the point will be in the correct position relative to the mouse  Also here you need to adjust the coordinates  before applying the inverse matrix to them  to be relative to the element   An example just showing the matrix steps  function draw evt        var pos   getMousePos canvas  evt             get adjusted coordinates as above     var imatrix   matrix inverse                  get inverted matrix somehow     pos   imatrix applyToPoint pos x  pos y       apply to adjusted coordinate      context fillStyle     000000       context fillRect pos x-1  pos y-1  2  2       An example of using currentTransform when implemented would be       var pos   getMousePos canvas  e               get adjusted coordinates as above     var matrix   ctx currentTransform             W3C  future      var imatrix   matrix invertSelf               invert         apply to point      var x   pos x   imatrix a   pos y   imatrix c   imatrix e      var y   pos x   imatrix b   pos y   imatrix d   imatrix f    Update I made a free solution  MIT  to embed all these steps into a single easy-to-use object that can be found here and also takes care of a few other nitty-gritty things most ignore

User · Answer

Refer this question  The mouseEvent offsetX I am getting is much larger than actual canvas size  I have given a function there which will exactly suit in your situation

[javascript] Real mouse position in canvas

The answer is

Examples related to javascript

Examples related to canvas

Examples related to html5-canvas

Examples related to mouse-position

Tags