Hey, I recently tried doing this and I found the best way to do this was to use javascript event listeners. If you're new to that, then I'd suggest using jQuery. Something like this in void setup:

Thanks for the help.

Do i put the "guage the proper height" in the void setup in the .pde file?

I like your website, its what I am trying to do myself. Having a background canvas element full screen and having content on top.

I managed to get the app to display full screen by putting the <canvas> tag inside of a <div style=" position: fixed; width="100%"; height="100%"; >

but no other content is visible even if I am setting the z-index's.

Actually never mind it wasn't working in coda. Forgot to test it in firefox.

It works perfectly thanks for your help. But when I put any <divs> on top of the background the mouseMoved() is not recognised and doesn't animate.

Any idea on how to fix?

Glad that helped. To answer your first question, yes the "gauge proper height" is in void setup

Thank you again for being so helpful.

I have input the code but it doesn't seem to work, have I put it in my file correctly?

1.  
   // Global variables
   float radius = 10.0;
   int X, Y;
   int nX, nY;
   int delay = 50;
   
   // Setup the Processing Canvas
   void setup(){
   
     // Gauge the proper height
   
       if( jQuery(document).height() > jQuery(window).height() )
       setupHeight = jQuery(document).height();
       else
       setupHeight = jQuery(window).height();
       jQuery('canvas').width(jQuery(window).width());
       jQuery('canvas').height(setupHeight);
       size(jQuery(window).width(), setupHeight);
   
     strokeWeight( 10 );
     frameRate( 25 );
     X = width / 2;
     Y = height / 2;
     nX = X;
     nY = Y;
     smooth(); 
   }
   
   // Main draw loop
   void draw(){
    
     radius = radius + sin( frameCount / 4 );
    
     // Track circle to new destination
     X+=(nX-X)/delay;
     Y+=(nY-Y)/delay;
    
     // Fill canvas grey
     background( 255 );
    
     // Set fill-color to blue
     //fill( 0, 121, 184 );
     noFill();
    
     // Set stroke-color white
     stroke(0);
    
     // Draw circle
     ellipse( X, Y, radius, radius );                 
   }
   
   
   // Set circle's next destination
   void mouseMoved(){
     nX = mouseX;
     nY = mouseY; 
   }
   
   
   void mouseMoved(float xpos, float ypos) {
   
       nX = mouseX;
     nY = mouseY; 
   }
   
   jQuery(document).mousemove(function(e) {
       mouseMoved(e.pageX, e.pageY);
       if(!mousePos) mousePos = new PVector(e.pageX, e.pageY);
       else {
           mousePos.x = e.pageX;
           mousePos.y = e.pageY;
       }
   });