Continue interacting when mouse is out of canvas

laxmana

I have a canvas on my header and when the user mouse over the canvas he / she can interact with the canvas. When the mouse is out the canvas the interaction stops. Is it possible to keep the interaction outside the canvas when the mouse moves in the whole document.

Is it possible ?

Thanks in advance

MenteCode

If it doesn't involve mouse presses, then adding these lines of code will get readings from outside the sketch:

import java.awt.MouseInfo;

void draw() {
  int x = MouseInfo.getPointerInfo().getLocation().x;
  int y = MouseInfo.getPointerInfo().getLocation().y;
  println(x + " " + y);
}

You get the main idea. println() is not necessary, and int x and y store the current mouse information.

-- MenteCode

PhiLho

If the question is about JavaScript mode, then the solution given by MenteCode won't work... Might need to additional JS code to listen events on the whole page.

laxmana

The question is about JavaScript mode. Sorry I didn't mention it. How the event handlers will interact with processing.js ? As far I know processing.js object is created with the canvas id as a attribute and everything take place inside the canvas(draw, interactions etc).

I got the main idea given by MenteCode but I would like to see if anyone has a js solution.

I will update if I manage to solve it based on the answers so far.

Thanks!

PhiLho

I moved the topic, and deleted the duplicate one (but thanks for cross-linking! :-)).

You can probably move your topic yourself by editing the first message and choosing the right topic in the combo box.

laxmana

Thanks and sorry about that. Didn't know it.

laxmana

I found a solution.

I put this in my pde file :

window.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event;
        mouseX = event.clientX; 
        mouseY = event.clientY;
}

I have to change a bit the way is be drawing on the canvas but at least it moves when I move the mouse outside of the canvas.

Thanks!

UPDATE :

I change also the width & height :

width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;