CODEWITHSUNDEEP
jquerycsshtmlcanvasz-index
XCS
XCS

Reputation: 28177

Canvas appears over content

Even though canvas element is placed before webpage content it appears on top.

<canvas id="cnv"></canvas>
<div id="content">
    blah blah
    <p>
         blahs
    </p>
</div>

One solution would be to set z-index to -1 for canvas but that would stop mousemove from being triggered.

Why is the canvas on top? How can I place it behind content while still being able to trigger mousemove?

http://jsfiddle.net/YUx82/

NOTE: The only CSS I am allowed to change is the one for the canvas.
Another solution would be setting z-index to -1 and then somehow passing the mousemove from the document to the canvas.

Upvotes: 0

Views: 71

Answers (1)

mika
mika

Reputation: 1451

Try that:

$("#cnv").on("transferMouseCoordinates", function(e, x, y){
  // voila!
});

$(document).on("mousemove", function(e) {
  // use e.pageX and e.pageY to get mouse position
  $("#cnv").trigger("transferMouseCoordinates", e.pageX, e.pageY);
});

Upvotes: 1

Related Questions