Y2 = b*x1 + d*y1 + f Built-In Point Transformation This is, not coincidentally, the formula for 2D affine transformation: x2 = a*x1 + c*y1 + e const canvas = document.getElementById('canvas') Ĭonst transform = context.getTransform() We can write a simple function to get the transformed mouse coordinates.
#Javascript get mouse coordinates full#
While that is only part of the full matrix that is returned, this is everything we need. We can get that by calling getTransform(), which returns an object with the following properties: While we could track the translate amount ourselves, the canvas already knows how much it’s translated. That way mouse position 0,0 becomes -20,-20. In this example after translating the canvas 2opx down and to the right, we need to translate the mouse cursor 20px up and to the left to get the proper coordinates. As long as we know the amount that was translated in both directions, we can subtract that from the mouse cursor position and we’ll get the correct coordinates. All the event cares about is where the element is on the page, and where your mouse is within the element, it does not care that the element happens to be a canvas and that the canvas happens to be translated by 20px in both directions.Īt this point, the solution for transforming the mouse cursor into canvas space is simple, subtract the translation amount from the mouse cursor position. This means that if you add a mousemove event listener to the canvas and get back the coordinates, the upper left corner will still be 0,0. So we have a new origin for the canvas, but while the canvas knows this, the browser does not. Here the red zero is the new origin and if you wanted to draw back to the upper left corner of the canvas, you’d need to draw at -20, -20. That means that as far as the canvas itself is concerned, the coordinate system now looks like this: So if we translate the canvas 20 pixels in the x direction and 20 pixels in the y direction, the new origin starts 20 pixels down and 20 pixels over from the original origin. The red lines and red zero mark the new origin of the canvas, meaning the red lines are the new X and Y zero, with the red zero being 0,0. The lowercase x and y represent a translate distance in the x and y direction. The origin of the canvas starts out in the upper left corner, making it 0,0 in canvas space by default, as shown in the graph above. Calling translate on a canvas moves the canvas and it’s origin to a new point on a grid ( MDN). We’ll start with the simple part, translating. Transformed: x: 0, y: 0 Translating the Canvas The upper left corner of the image will always be the origin 0,0. Clicking and dragging in the canvas will move the image around, and scrolling your mouse wheel while over the canvas will zoom in to and out of the image at the exact position of your cursor. You can also see a fully working JSFiddle here.Ĭheck out the example below. If you just want a fast answer to “how do I transform a point to the transformed canvas space”, click here to go right to the secret sauce. This article goes into why and how this works, but you don’t really need to know that to accomplish this. So, I set out to create a nice modern version that worked and that I could understand, and that made use of the canvas’s built in transformation tracking.
And all the examples required you to track your own version of the transformations applied to the canvas, but now with getTransform we can make use of the fact that the canvas already stores all of it’s transforms. All examples and info online followed bad practices or use outdated features to work.
I wanted to be able to add intuitive zooming and panning in an image editing web app I was working on, but this turned out to be a bit harder than I expected.
0 kommentar(er)
