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.
Related
I am using a HTML div element as a tool tip for a canvas, i.e. the div shall follow the mouse's motions as the mouse pointer moves across the canvas element.
This works – almost. The tool top is south-east of the mouse pointer, and when the pointer is moving south-east-ish then it may happen that the pointer moves onto the div element so that no more mouse-move events are reaching canvas. This is only resolves when the mouse is further moved beyond the div which makes the div jump in an ugly way to adjust to that position.
How can I avoid these jumps and implement that the div is "transparent" for the mouse?
Usual bubbling up does not work because a canvas cannot hold children; at least when I am adding children to a canvas they won't be displayed.
No external modules like jQuery or whatever are used / available.
You should be able to use pointer-events: none; on the div.
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!
I have a simple stamp tool, which places a translucent geometrical shape like star, hexagon on mouse down, moves it on mouse move from its center and places it fully opaque on mouse up. But, it is giving me a trail of pencil brush on mouse move, no matter what. I do not need this pencil stroke. How can this be disabled ?
I have tried to set the width of freeDrawingBrush to 0 and now the stroke does not stay on the canvas, but it still shows during mouse move when the stamp shape is moving and then goes away on mouse up. Is there a way to disable this ?
I have also tried to disable freeDrawingMode but then disabling canvas wide selection of objects does not work, and hence I need a way to somehow stop the pencil brush when the stamp tool is selected.
So im making a html5 / js RTS game. The game can be ran fullscreen. The problem now is, players with dual screen will have their cursor go out of the canvas and jump over to the 2nd screen when they move it too far. Is there a good way, to prevent that ?
I know, there is this, but this seems to hide the cursor, which is obv not what i want in an RTS game. Ofc i could draw my own cursor, but the problem with this is, the cursor drawn then will depend on the framerate, which can sometimes go a bit down and so or so it will feel a lot less smooth than the "normal" cursor. So, is there a way to lock the cursor in an element without hiding it and still be moveable but just stop at the border ?
There is no method to restrict mouse movements by the user.
Chuckle...If it was possible you can imagine advertisers would freeze your mouse over a "purchase now" button on an ad. :-)
If it makes sense to your design, you can have your canvas element "capture the mouse events".
Capturing the mouse makes the canvas receive all mouse events even if the mouse is physically out of the canvas element. Maybe this will be useful in your design--maybe not.
https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture
Good luck with your game!
I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas.
Of course I would not like to paint over the image while the user is just moving the mouse.
My ideas how I could do this:
I could somehow backup the original image and paint it all over every time
I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.
What would be the best to do this?
Update
Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.
Checkmark+1 to PitaJ and David Starkey--they are correct.
The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.
But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)
Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.
CSS3:
#canvas1 {
cursor: url(./myCursor.cur), none;
}