Using the Attached Fiddle we could see the circle is created on mouse up. Right now, it is drawing the circle by choosing the mouse up point. So, wherever we our mouse up position, the circle will be created there.
Fiddle Link
<div id="canvas">Click to draw<br/></div>
I am actually trying to create a circle starting from mouse down point till mouse up point.
Please suggest
Related
Lets say that I have a player sprite, located at (player.x, player.y). On a mousemove event, I am capturing the cursor's position, which is (e.pageX, e.pageY). In the game, the player will be constantly moving, always towards the direction of the cursor. I am trying to find a way to to rotate the player sprite to always face the mouse cursor, and also move 10 pixels closer to the cursor every game tick. So far, this has me stumped. I have seen many examples of this online, and have tried all of them, but none seem to work. Any help that can be provided would be very much appreciated.
First of all, you must learn the basics of trigonometry. Without this knowledge, you will can't make something like you want.
Center of you image is the center of an circle. Knowing position of center and mouse position, you can calculate the angle. Calculated angle you can use to rotate image.
I use hover tooltips in my map. When an area is hovered, I show a tooltip with a small XY shift to the top left corner so that the pointer of the tooltip is not covered by the mouse cursor.
When I move mouse cursor to another area, near its border, like show in the image, the area is highlighted which is under the cursor, not under the square pointer as should be.
What are options to fix this issue? In the ideal way, I would like hover effect to be applied not to the mouse cursor coordinates, but to the coordinates of some other point that is known and changes while mouse is moving.
I once had a similar problem that I tried to solve with a different approach. I wanted to calculate the centroid of the polygon and always place the marker (in your case square pointer) on the calculated position once the user hovers over the polygon.
Main problem I had was that my polygons were concave and had holes in them (you will have the same problem if you are working with country borders) so I found a good algorithm (library) that I used to do this called Polylabel.
You can read more on this topic and how the guys from MapBox used it to solve their label positioning problems on this link.
Although this is not the answer to your question I found that this solution is fast and usable but only if the relation between the zoom level and polygon surface makes sense.
If I wanted to do something like you are suggesting I would first have a default point offset and if that offset goes outside the polygon I would find the nearest point in the polygon coordinates and attach it to that point.
To do these calculations you can use turf.js library. It has the function to return boolean value if the second geometry is completely contained by the first geometry and others that can help you to find the nearest point on the polygon border. I hope this helps!
So I have a circle that is being drawn on a canvas, it changes size according to a setting. However, if the setting is set too high, the circle is bigger than it's reserved area, and overlaps other things in the canvas.
I'm currently erasing the area surrounding the box after it is drawn, but it causes difficulties. I basically have to draw everything around it twice because I need the circle to be drawn last. This makes it more difficult to implement click actions in said surrounding area, because the click is registered twice.
TL;RD: How could I mask out part of a circle before I draw it on the canvas?
For this you can use the clip() function.
context.rect(50,50,200,200);//the area in which the circle is to be drawn
context.save();//saved context so it can be restored later
context.clip();
//now draw your circle
context.restore(); //remove the clip
Only the area inside the given rectangle is drawn.
Here is a good tutorial on the subject.
I am trying to get the mouse over function working in my pure Javascript (no jQuery, HTML or CSS). At the moment I have created just a small circle and when I mouse over it I want it to change colors.
instance.threadContext is just the part of the canvas where the circle is being drawn.
Any help would be much appreciated.
What you need to understand is that when you draw something onto a canvas, it does not become a ui element, but is actually a part of the overall image of the canvas. The reason you can't invoke a mouse-over event on the circle is because the circle isn't a thing that can receive events, it's just a drawing of a circle on an element which itself can receive events.
One way that you can get around this is to measure the mouse position on move and redraw the circle in an over state when the position is within the area for which you want the event to be triggered.
Can anyone Please tell me how to draw an arc on mouse movement.
I have a compass Image, I want to draw an arc starting from its top. As mouse move it will draw an arc. I can rotate the compass in any direction (from center of compass). Does anyone have any idea?
Live Demo
The above draws an arc when you click and on mouse move expands it, however it doesnt delete the previous one. Your question is a bit vague, so let me know if this is close to what you were talking about.