How do I find the mouse's position on the canvas when the canvas has a % width on it?

Asked Nov 27 '20 at 02:06

Active Nov 27 '20 at 02:06

Viewed 26 times

So, I know a similar question has been asked before but this is asking for something slightly different: My canvas has a x% CSS style width and a y width. Nothing is constant, but an example would be:

canvas.style.width;
// Returns: 60%
canvas.width;
// Returns: 800

So, I need to figure out how to find the X on the canvas where the mouse is (the position should be in the canvas' width so for example, if you were to click on a coordinate it would draw that coordinate on the canvas).

How can I do this knowing that 1px of my screen does not equal 1px of my canvas? I know how to evaluate the Y once I get the equation for the X.

asked Nov 27 '20 at 02:06

Penguin

You are in the "**When Element and Bitmap are of different sizes**" case. – Kaiido Nov 27 '20 at 02:10
Thx I've spent hours looking and trying solutions – Penguin Nov 27 '20 at 02:13
Yes, you need to multiply by this ratio `/`->`*` – Kaiido Nov 27 '20 at 02:21
oh sorry i misread thx – Penguin Nov 27 '20 at 02:21
It does: https://jsfiddle.net/pqswn6om/ – Kaiido Nov 27 '20 at 02:26
@Kaiido no i said it did work, its fine. thx – Penguin Nov 27 '20 at 03:25

How do I find the mouse's position on the canvas when the canvas has a % width on it?

0 Answers0