get mouse coordinates within image in canvas - javascript

I've got a HTML Canvas with an image in it and I would like to get mouse coordinates where user clicked within the image.
I can do this in a way, that I get mouse coordinates starting from top-left corner of the canvas, but I need to use top-left corner of the image itself as [0,0] point.
I am working with this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html
thanks

The context.translate(x,y) command does exactly what you're asking for.
context.translate will move the origin of the canvas to the x,y coordinates given to it. So if x,y is the top left corner of the "hit" image, then you can make x,y the origin (effectively 0,0) using context.translate(x,y)
You don't present code, but I assume that you have already:
determined where the user clicked the mouse,
determined if the user clicked the image by hit-testing the mouse coordinate against the bounds of the image,
have available the x,y where you originally drew that image on the canvas
To illustrate, if you context.translate(imageLeftX,imageTopY) and a then fillRect(0,0,1,1) will draw a rectangle in the top left corner of the image.

Related

How to get image corner position after rotate in OpenSeadragon

Hi I have a problem with getting the x and y coordinates for the corner after rotation. When I transfer the image, it always gets the correct coordinates, but as soon as the image is rotated, it receives the coordinates from the corner of the viewport, not the image :/
Is this with the viewport rotated or the image rotated? If it's the image rotated, I believe this should work:
viewer.world.getItemAt(0).getBounds().getTopLeft()
Actually, that might work properly with the viewport rotated as well. The result is in viewport coordinates... I assume that's what you want? If not, you can convert to the other coordinate systems as needed.

Keeping rectangle in place after rotating

I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!

Html 5 Canvas keeping track of position when rotating rendered image

I have been trying to get this working but nothing yet! My math level isn't that good as well. What I have right now is that I have an arrow which is pointing North and when the mouse is being held, the arrow points to where the mouse moves. I have a bounding box that determines when the arrow is being selected with the mouse.
After a rotation however, I lose that bounding box as it is still on the original position. Is there anyway to make the bounding box move to the new coordinates or is there any way where when I click on the rotated arrow, I make the arrow know that it is being clicked on?
Thanks in advance!

Always Show Mouse Over Canvas

I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again.
So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible.
Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695
The mouse can certainly navigate off-canvas, so...
Hide the mouse when it's over the canvas.
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove.
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position.
Your "fake" canvas cursor doesn't have to look like a mouse. It could even be a simple cross. Or if you really want it to look like a mouse, then move an image of a mouse around the canvas.

Pan Larger image when Thumbnail is panned

Sorry for the awful title, I wasn't sure of the correct terminology to use.
I have put a world map on a webpage with a canvas window on the image. This world map is far too large to view at once so the user can pan the image within the window. I would like to also place a "thumbnail" version of the image on the page with a rectangle cursor over
layed on top of the thumbnail. When the user moves the cursor over the thumbnail, the large map will move (self-pan) to match the area under the rectangle cursor on the thumbnail![enter image description here][1]
There is an example in the image provided. You will see a small portion of a worldmap. To the right is a thumbnail of the image with a rectangle cursor. When that cursor is moved, the world map will pan.
I am using HTML5 and javascript. No other languages. If someone could point me to an example or set me on the right path, I would be very grateful.
Thank yoU!

Categories