I played around a bit with processing.js, an awesome bit of software that runs processing scripts in a browser using the HTML canvas element. I wanted to use it to create an animated full browser background for a web page. I couldn’t find any info on how to do this online, but came up with a solution. It may not be the most elegant, and performance starts taking a big hit at large sizes, but I wanted to share it in case anyone wanted to build on it or already has a better answer. I’ll also note that I haven’t tested this thoroughly.

Simply resizing the canvas element just stretches the rendered image so it needs to be changed within processing.

Since the processing script is essentially converted into javascript it’s possible to communicate between the processing script and other javascripts. So, I added an listener for the window resize event (using jQuery), which calls a function in the processing function to resize the canvas element.

The javascript looks like this:

// javascript (requires jQuery http://jquery.com)

var ProcessingInit = function() {
  function resizeWindow() {
    var pCanvas = Processing.getInstanceById('pCanvas');

It’s wrapped in a function so that it can be called from processing when the application is started. ProcessingInit(); in the setup function. This makes sure the canvas element is fully instantiated before it tries to manipulate it.

It’s pretty straightforward on the processing side as well. That function simply calls the size function again. I’m not sure if that’s good practice, but it seems to work fine.

// processing

void setup() {

void resize(float X, float  Y) {


  • Jon Buckley

    There’s other ways of checking if Processing.js is ready to start drawing, but the only real downside to doing it this way is that it’s not compatible with the Processing IDE (the original version of Processing written in Java).

    The downside to calling size() multiple times is that it won’t work in 3D mode. This is due to a problem with the underlying WebGL technology powering Processing.js’ 3D mode.

    Still, nice Processing.js hack!

  • Anthony

    Thanks Jon!

    At some point in playing with this I stopped using the Processing IDE, it was quicker to just work in one program, so I didn’t catch that or test 3d rendering. Is there a better way to resize the canvas, or are there any downsides to calling size() multiple times in 2d rendering modes?

  • Jon Buckley

    Nope, that’s the best way to handle it from a PJS perspective

  • Jan Vantomme

    Do you have a working example somewhere online? I’m having trouble to get it working with external .pde files. Would be great if I could see the source to find out what I’m doing wrong.

  • Anthony

    I threw up the ‘proof of concept’ script I created at http://anthonymattox.com/misc/pjs_fullscreen/, and an archive of all the files http://anthonymattox.com/misc/pjs_fullscreen/FullscreenPJS.zip. I did a very quick cleanup/commenting of the code. Hopefully enough to make everything clear. The script is also playing sounds embedded in html audio tags via a javascript function from the Processing script.