Холст появляется над контентом

Question

Несмотря на то, что элемент canvas размещен перед содержимым веб-страницы, он отображается сверху.

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

Одним из решений было бы установить z-index -1 для холста, но это остановит mousemove от того срабатывает.

Почему холст сверху? Как я могу разместить его за содержимым, все еще имея возможность запускать mousemove?

http://jsfiddle.net/YUx82/

Примечание: только CSS я имею право изменить это один для холста.
Другим решением будет установка z-индекса на -1, а затем каким-то образом передача mousemove из документа на холст.

Answer 1

Попробуйте это:

$("#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); 
});