Is there a way to change the mouse pointer when the mouse moves over the canvas component?

Anvil Q&A
1

What I’m trying to do: Change the mouse pointer to a “cross-hair” when it moves over a canvas component

What I’ve tried and what’s not working: I have looked through all of the methods and properties and haven’t been able to find anything yet

Code Sample: None yet

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

edit: removed misleading answer

–

Welcome to the Anvil forum, by the way!

1 Like
3

Thank you Tim!

John C. Wiger DDS, MSSpecialist in Orthodontics

1 Like
4

You could also do this with a role on the canvas element.

Create a role called canvas-crosshair, then add the following to your theme.css

.anvil-role-canvas-crosshair: {
    cursor: crosshair;
}
2 Likes
5

Oh, right, that’s definitely the way to do it. (It’s coming back to me now from my limited CSS learning.) No Javascript needed.

6

Perfect Stu, thanks! One more question about the Canvas—when I resize the window, the drawings disappear. Thanks in advance!

John C. Wiger DDS, MSSpecialist in Orthodontics

7

Edit: Unneeded technique involving window resize event and a timer deleted, so as to not confuse anyone finding this post later.

8

You can re-draw your canvas from the canvas reset event.
The canvas reset event fires any time the canvas is reset and cleared by, for example, window resizes.

1 Like
9

Thank you Stu! My drawing consists of 50 “points” with (x,y coordinates from mouse clicks) that I had to store in a list. I looped thru the list and was able to redraw everything when I called the function from the canvas reset even.

John

3 Likes