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.
Related
I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.
do you know how the mouse following effect showed on this site was made?
https://pygar.co/en
Thank you.
You can look at the source code of this page, It not canvas but html div manipulate by java script
They have a div with class pointer__wrapper that fit the window size
Insize the pointer__wrapper they have pointer__wrapper--small and pointer__wrapper--big to handle the small circle and larger circle
In app.js file, they have javascript to handle event mouse hover through every element. The small circle and big circle be manipulated (resize, move) depend on the hovered element.
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
I'm trying to draw rectangles with the mouse using the Raphael 2+ library (note: the answer to this question won't work with Raphael 2).
With rectangles (Paper.rect), the mousedown/mouseup events only trigger when the cursor is on the edge of the rectangle and not within it. Is there a way to attach these events so they trigger when the mouse cursor is within the rectangle?
Ultimately, I'm trying to draw marquees/frames with the mouse. Ideally, I'd like to attach mouse listeners to the paper, but this is no longer possible, so I'm creating a 'surface' rect on the paper and drawing my elements within it. Is this approach whack? Any ideas most welcome.
I've played around, and it seems that you have to fill your shape in order to have your events fired. See here : http://jsfiddle.net/bathz/KrpKs/
That just makes sens to me, It enables you to sharply define the perimeter of what you listen to. I guess you could fill the shape with a transparent color, but I'll leave it to you.
So if I draw a circle on HTML5 canvas, I want to make it so that the user can click somewhere in the canvas and the circle of a given radius will move gradually to the point mouseclicked on the canvas. I know jquery has the animate function, but since the canvas does not have a DOM, I am not sure how to accomplish this.
You will need to continuously repaint the canvas in a loop. A canvas is just a bunch of pixel data. If you want something to animate you have to draw each frame.
First clear the canvas to white (or any other color). Calculate the new position for the circle. Draw it. Wait for a short amount of time. Repeat.