We Keep Coding

Particles follow cursor on mousemove (Javascript - Canvas)

I'm trying to create a simple animation where some particles animation follow the cursor, but i'm having trouble with it.
I've created a fiddle to replicate the issue : Example on JSFiddle
Right now my particles appear, but when you move the cursor over the section, they suddenly disappear. I know my error comes from my mousemove() function, but i can't figure out what is wrong with it..
here is my mousemove function :
function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}

Your mouse coordinate X, Y is relative to the top/left corner of the web page, probably mousemove event is attached to document, not to the canvas. Attach the mosemove event to the canvas
document.getElementById('services-canvas').addEventListener('mousemove', mouseMove);
And use the elemnt ofset:
target.x = e.offsetX;
target.y = e.offsetY;
If you would like the mouse to be in the centre of figure, then use e.offsetY-something where something is half of height of figure

So your particles do actually follow the mouse from what I have seen in . However, it seems that they are way lower in the y position that you would expect.You need to do this to make it work properly:
target.y = posy -300;
I have tried it and it worked with this little change. Hope this helped :D

Getting mouse coordinates in firefox 41

I am trying to drag and drop a element based on mouse coordinates. Its working fine in chrome and IE but not working in firefox.
Below is what I have tried:
function createShape(event)
{
var stageContainer = $(".mainArea");
var stageOffset = stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX; // works in chrome and IE
y = clientY - offsetY; // works in chrome and IE
//Firefox
var offX = (event.offsetX || event.pageX - $(event.target).offset().left);
var offY = (event.offsetY || event.pageY - $(event.target).offset().top);
layerX = event.layerX;
layerY = event.layerX;
screenX = event.screenX;
screenY = event.screenY;
pageX = event.pageX;
pageY = event.pageY;
e = jQuery.event.fix(event);
var target = event.target || event.srcElement;
//Right now this is working but x and y are not exactly correct
x = screenX + offsetX
y = screenY + offsetY
Doesn't work in firefox
ClientXY return 0,0
LayerXY return largest number like 173839,173839
pageX and pageY returns 0,0
element.offset().left returns 70 always
element.offset().top returns 63 always
createRect(x, y); // creating element on dragend with x and y coordinates on dragend
}
How do I get drag end mouse coordinates?

Sadly, Firefox does not fill pageX and pageY properties on drag events. The relevant bug report is open since 2009 and it doesn't look like it is getting fixed anytime soon. The common solution is to listen for dragover event on the parent element (although it makes it difficult to detect which element is being dragged) or detect the position of the element being dragged in some other way.

drag div on exact mouse point

I'm trying to drag an element with just vanilla JavaScript.
When I drag the element I want it to move in sync with where the mouse pointer clicked, I can move it via the elements top left corner which is simple enough but I'm having issues moving it from the exact point of click.
Javascript
function mouseMove(e){
if(dragging){
boxPos(sq,e);
}
}
function boxPos(el,e){
box = el.getBoundingClientRect();
mouse_top = e.clientY;
mouse_left = e.clientX;
diff_x = mouse_left - box.left;
diff_y = mouse_top - box.top;
el.style.top = (mouse_top + diff_y) +"px";
el.style.left = (mouse_left + diff_x) +"px";
}
sq is a div, e is the event.
What im trying to do is calculate the position of the mouse, work out the difference from the top/left and add it to the top left but I'm getting undesired results. See fiddle

I know it has been passed some years but, testing the Fiddle, I figured out that (at least to me) the answer isn't exactly what the OP was looking for. That's because in the response's Fiddle the div is moved perfectly but it's moved always on its origin (0,0) and not where it was exactly clicked.
The solution is actually quite simple.
You are calculating the diff_x and diff_y on every mousemove event. But the mouse pointer position while moving is always fixed in relation to the div at the very start of the mousedown event until firing the mouseup event, right? So, just declare the diffs' variables globally and calculate them on the mousedown event.
Then, change the following code:
function boxPos(el,e){
box = el.getBoundingClientRect();
mouse_top = e.clientY;
mouse_left = e.clientX;
diff_x = mouse_left - box.left;
diff_y = mouse_top - box.top;
el.style.top = (mouse_top + diff_y) +"px";
el.style.left = (mouse_left + diff_x) +"px";
}
To:
function boxPos(el,e){
box = el.getBoundingClientRect();
mouse_top = e.clientY;
mouse_left = e.clientX;
el.style.top = (mouse_top - diff_y) +"px";
el.style.left = (mouse_left - diff_x) +"px";
}
The diffs' math is done on the mousedown event, so we don't need it anymore. Thus, this will stop the flickering.
Besides that, as the diffs will always be positive, we just subtract the diffs from the corresponding mouse coordinates to place the div taking into account the difference calculated (because the mouse pointer must be on top of the div to trigger the mousedown event, then e.clientY >= sq.style.top and e.clientX >= sq.style.left will be always true). This last step is the one that moves the element on exact mouse point.
This logic may be used on other "dragging events", like the dragstart and drag events, touchstart and touchmove events and pointerdown and pointermove events as well (with some adaptation, of course). So, since this kind of behaviour may be relevant, I decided to post this answer. I hope it helps future readers.
Here's the OP's modified Fiddle.

A quick hotfix would be:
change
el.style.top = (mouse_top + diff_y) +"px";
el.style.left = (mouse_left + diff_x) +"px";
to
el.style.top = (Number(el.style.top.split("px")[0]) + diff_y) +"px";
el.style.left = (Number(el.style.left.split("px")[0]) + diff_x) +"px";
or
el.style.top = (Number(el.style.top.replace("px", "")) + diff_y) +"px";
el.style.left = (Number(el.style.left.replace("px", "")) + diff_x) +"px";
You need to move that div from its old position to the new one using the old coordinates and the calculated difference. To get the old position I used the current top and left setting, removed the "px" from it and converted it to a number. This is necessary to avoid string concatenation (top and left are string values).
Your program has another bug ... you currently can't stop the dragging mode.
Edit
To remove the drag "stop" bug you could subtract 1 pixel from the new value, so the mouse pointer would still be inside the div and the mouse up event will be triggered correctly.
You can do that like this:
el.style.top = ((Number(el.style.top.replace("px", "")) - 1) + diff_y) +"px";
el.style.left = ((Number(el.style.left.replace("px", "")) - 1) + diff_x) +"px";
Here is the new Fiddle.

Canvas presents problems when resizing the screen

I have this design and works perfectly: http://jsfiddle.net/98Bgq/22/
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
But when I resize the screen of my browser, it seems the canvas begins to operate in a totally different way than normal, in the above example can not I click a few more parts of the design, how can I solve this?

Since you're using jQuery, it will probably be easiest to use event.pageX. E.g.
mouseX = e.pageX - $canvas.offset().left;
mouseY = e.pageY - $canvas.offset().top;
Edit: For non-jQuery, this works well:
mouseX = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
mouseY = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY;
event.pageY/X returns the mouse position relative to the top/left edge of the document. $elmnt.offset() returns the coordinates of the element relative to the document. So subtracting the latter from the former gives you the relative position of the mouse in the canvas.
event.offsetY/X/event.layerY/X give you the coordinate of the event relative to the current layer. layerX doesn't work with chrome, so if it's not present, offsetX is used instead.

offset and scroll might change on a window resize : handle the resize event and recompute them :
this fiddle seems to work :
http://jsfiddle.net/gamealchemist/98Bgq/24/
code :
var offsetX = 0, offsetY = 0;
var scrollX = 0, scrollY = 0;
function computeOffset() {
canvasOffset = $canvas.offset();
offsetX = canvasOffset.left;
offsetY = canvasOffset.top;
scrollX = $canvas.scrollLeft();
scrollY = $canvas.scrollTop();
}
computeOffset();
window.onresize = computeOffset;

Getting mouse location in canvas [duplicate]

This question already has answers here:
How do I get the coordinates of a mouse click on a canvas element? [duplicate]
(22 answers)
Closed 3 years ago.
Is there a way to get the location mouse inside a <canvas> tag? I want the location relative to to the upper right corner of the <canvas>, not the entire page.

The accepted answer will not work every time. If you don't use relative position the attributes offsetX and offsetY can be misleading.
You should use the function: canvas.getBoundingClientRect() from the canvas API.
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);
}, false);

Easiest way is probably to add a onmousemove event listener to the canvas element, and then you can get the coordinates relative to the canvas from the event itself.
This is trivial to accomplish if you only need to support specific browsers, but there are differences between f.ex. Opera and Firefox.
Something like this should work for those two:
function mouseMove(e)
{
var mouseX, mouseY;
if(e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
/* do something with mouseX/mouseY */
}

Also note that you'll need CSS:
position: relative;
set to your canvas tag, in order to get the relative mouse position inside the canvas.
And the offset changes if there's a border

I'll share the most bulletproof mouse code that I have created thus far. It works on all browsers will all manner of padding, margin, border, and add-ons (like the stumbleupon top bar)
// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
// takes an event and a reference to the canvas
function getMouse = function(e, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset. It's possible to cache this if you want
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar (like the stumbleupon bar)
// This part is not strictly necessary, it depends on your styling
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object with x and y defined
return {x: mx, y: my};
}
You'll notice that I use some (optional) variables that are undefined in the function. They are:
stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
// Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
htmlTop = html.offsetTop;
htmlLeft = html.offsetLeft;
I'd recommend only computing those once, which is why they are not in the getMouse function.

For mouse position, I usually use jQuery since it normalizes some of the event attributes.
function getPosition(e) {
//this section is from http://www.quirksmode.org/js/events_properties.html
var targ;
if (!e)
e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
// jQuery normalizes the pageX and pageY
// pageX,Y are the mouse positions relative to the document
// offset() returns the position of the element relative to the document
var x = e.pageX - $(targ).offset().left;
var y = e.pageY - $(targ).offset().top;
return {"x": x, "y": y};
};
// now just make sure you use this with jQuery
// obviously you can use other events other than click
$(elm).click(function(event) {
// jQuery would normalize the event
position = getPosition(event);
//now you can use the x and y positions
alert("X: " + position.x + " Y: " + position.y);
});
This works for me in all the browsers.
EDIT:
I copied the code from one of my classes I was using, so the jQuery call to this.canvas was wrong. The updated function figures out which DOM element (targ) caused the event and then uses that element's offset to figure out the correct position.

GEE is an endlessly helpful library for smoothing out troubles with canvas, including mouse location.

Simple approach using mouse event and canvas properties:
JSFiddle demo of functionality http://jsfiddle.net/Dwqy7/5/
(Note: borders are not accounted for, resulting in off-by-one):
Add a mouse event to your canvas
canvas.addEventListener("mousemove", mouseMoved);
Adjust event.clientX and event.clientY based on:
canvas.offsetLeft
window.pageXOffset
window.pageYOffset
canvas.offsetTop
Thus:
canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset);
canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
The original question asked for coordinates from the upper right (second function).
These functions will need to be within a scope where they can access the canvas element.
0,0 at upper left:
function mouseMoved(event){
var canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset);
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}
0,0 at upper right:
function mouseMoved(event){
var canvasMouseX = canvas.width - (event.clientX - canvas.offsetLeft)- window.pageXOffset;
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}

I'd use jQuery.
$(document).ready(function() {
$("#canvas_id").bind( "mousedown", function(e){ canvasClick(e); } );
}
function canvasClick( e ){
var x = e.offsetX;
var y = e.offsetY;
}
This way your canvas can be anywhere on your page, relative or absolute.

Subtract the X and Y offsets of the canvas DOM element from the mouse position to get the local position inside the canvas.