Getting mouse position in a canvas element when z-index=-1

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.

Answer 2

Well, since you change the z-index to -1 and your body has z-index auto, which you can think of as 0 in this case, you will not be able to register any clicks on your canvas, since it's under the body. Your body gets all the clicks and so on. You have to register your mouse events on the body itself in this case.

If you have to get clicks on the canvas, this only thing I can suggest is to make it z-index=1 and make it fully transparent. But in that case you will not be able to click on any elements that are in the body, like buttons, links and textboxes. Otherwise, you'll have to capture events on the body and manually submit the coordinats into the library that you are using.