Question

this seems like a simple problem. I have a canvas application that I am writing using Processing.js and I want it to appear in the background of a webpage. To accomplish this I have the following css:

#canvas-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Where canvas-back is the id of a div that contains the actual canvas. The canvas itself is set to have the width and height of the html body element. This renders correctly for me (the canvas in the background, beneath my html content) but I can no longer capture the variables mouseX and mouseY (what processing.js uses to get the mouse coordinates).

How can I fix this problem? Is it a matter of different css or is there another way to get mouse coordinates in processing.js? Thanks.

Answer 1

Figured I’d post my solution in case anyone has the same problem. Since I was using jquery I went ahead and set new variables, jmouseX and jmouseY, to the mouse position.

jQuery(document).ready(function(){
    $(document).mousemove(function(e){
        jmouseX = e.pageX;
        jmouseY = e.pageY;
    }); 
})

Then whenever I need mouseX or mouseY in my processingjs app I just use jmouseX and jmouseY.