Processing.js canvas with some divs over it not working on iPad

Question

I am building a webpage with a fullscreen background built with Processing that is being executed on a fixed positioned fullscreen html5 canvas. On top of this canvas I'm positioning some divs which are being displayed as expected. As my Processing animation responds on mouseX and mouseY user interaction, I had to pass the jQuery .mousemove x and y variables to my sketch because when I was using Processing's mouseX and mouseY everytime the cursor was over a div the animation stopped so that solved my problem. On desktop FF, Chrome and Safari it works great but on iPad I can't get the canvas to recognize the mouseX and mouseY coordinates if the divs are displayed, no matter if I'm using jQuery's .mousemove or Processing's mouseX and mouseY. I tried getting rid of all divs and the sketch worked as expected. I also tried with CSS pointer-events:none; but it didn't worked and, of course, all links stopped working as well. Can anyone help? Why is this happening on iPad when on desktop everything works great?

This is and example of my code:

HTML

<body>

<!-- Background P5 Canvas -->
<canvas id="p5can" data-processing-sources="noise/noise.pde"></canvas>

<header>

    <div id="name">XXXX</div>

    <div id="project-name">XXXX</div>

</header>

<div class="wrapper">

    <div id="disclaimer">XXXX</div>

    <div id="built"><a href="xxxx" href="_blank">xxxx</a></div>

    <div id="about-me-shooter">About me_</div>

    <div id="contact-me-shooter">Contact me_</div>

</div><!-- Wrapper -->

CSS

canvas {
position: fixed;
}

header {
position: fixed;
top: 25px;
left: 0;
width: 1120px;
height: 150px;
z-index: 10;
}

.wrapper {
width: 1208px;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}

PDE File Example

float t = 0;

void setup() {

  background(#bdbdbd);
  size(window.innerWidth, window.innerHeight);
  smooth();

}

void draw() {

  float x = mouseX;
  while (x < width) {
      line(x, mouseY * noise(x, t), x + 60, (mouseY + 60) * noise(x, t));
      x = x + 1;
  }

  t = t + 0.01;

}

score 0 · Answer 1 · answered Apr 14 '13 at 17:32

Solution was so easy... it took me hours to find it out! Seems Chrome & Safari on iPad needs to get the canvas size declared on the CSS otherwise it won't work when adding divs on top of the canvas. It doesn't matter if you declare the size in your PDE file. So adding width:100% and height:100% to the canvas object solved my problem. Hope this can help other people having the same problem :)

Processing.js canvas with some divs over it not working on iPad

1 Answers1