How to Get the Real Mouse Position on an HTML5 Canvas?

Real Mouse Position in Canvas

To draw within a HTML5 canvas using the mouse cursor, it's often imperative for the canvas to be positioned at the origin (0,0) within the parent container. However, if the canvas position is adjusted away from the origin, discrepancies may arise when drawing.

The Simple 1:1 Scenario

If the canvas element's dimensions align perfectly with the bitmap size (1:1 ratio), use the following snippet to capture mouse positions:

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

Integrate this method into your event, providing the event and canvas as arguments. It returns an object detailing x and y mouse positions. Subtract the canvas position to align with the element itself.

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);
}

Different Sized Element and Bitmap

When the canvas and bitmap differ in size, such as due to CSS scaling or differing pixel aspect ratios, adjust the calculations as follows:

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 adjusting for element relativity
    y: (evt.clientY - rect.top) * scaleY // scale mouse coordinates after adjusting for element relativity
  };
}

Context Transformations Applied

If the canvas context has undergone transformations like rotation or scaling, calculate the inverse of the current matrix to account for these. Newer browsers offer access to the current transform via the currentTransform property, while Firefox offers an inverted matrix via mozCurrentTransformInverted.

If custom matrix calculation is necessary, implement your own solution or utilize existing libraries like the one provided at: [Custom Matrix Solution](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

Apply the inverse matrix to the mouse coordinates after adjusting for element relativity to align with the correct mouse position.

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var imatrix = matrix.inverse(); // obtain the inverse matrix somehow
pos = imatrix.applyToPoint(pos.x, pos.y); // apply inverse matrix to adjusted coordinate

context.fillStyle = "#000000";
context.fillRect(pos.x - 1, pos.y - 1, 2, 2);

Alternatively, if using currentTransform is feasible:

var pos = getMousePos(canvas, e); // get adjusted coordinates as described 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;

For further simplifications, consider utilizing a comprehensive library that handles all these steps, such as the free MIT-licensed one mentioned in the last code block.

The above is the detailed content of How to Get the Real Mouse Position on an HTML5 Canvas?. For more information, please follow other related articles on the PHP Chinese website!