A Trick for Using Processing.js as a Website’s Background

For my portfolio site I wanted to have a fancy background made with Processing.js. I implemented this pretty easily, and here’s a screenshot of the final product:

In the HTML there is a <canvas> tag that holds the background:

<canvas ... data-processing-sources="js/PortfolioBackground.pde" width="1626" height="635" ...></canvas>

And after googling around a bit, I was able to find a nifty little JavaScript hack to make the processing sketch scale when the browser was re-sized (I might go over this in a future post).

But there was still a minor problem with the background – Processing.js “eats” mouse and keyboard events. When a user clicked once on the background of my page, their keyboard and mouse commands would  stop working. This means:

• Refreshing the page using keyboard shortcuts doesn’t work (F5, Control-R)
• Closing the browser with keyboard shortcuts doesn’t work (Alt-F4, Command-Q)
• Scrolling with the arrow keys doesn’t work
• Right clicking doesn’t work

…pretty much anything that uses the mouse/keyboard doesn’t work. The functionality is restored again when the user clicks on something other than the background.

Most people would be perfectly content with this minor flaw in their website. For those like me who aren’t, I was eventually able to figure out a solution. Because I knew the <canvas> tag itself doesn’t exhibit this behavior, I spent more time than I’m willing to admit trying to figure out if there was some kind of setting/hack for Processing.js that would fix this issue. After a while of this a thought struck me, and I felt like an idiot for not thinking of it before:

<canvas ... data-processing-sources="js/PortfolioBackground.pde" ...></canvas>
<div style="position:fixed;left:0;top:0;width:100%;height:100%;opacity:0;"></div>


It really was that simple. Just a big, invisible <div> in front of the <canvas> and all my problems were solved.

Of course there are downsides to doing this. For one, no more fancy keyboard/mouse interactivity. I was okay with this, though, as I wanted the background to be as subtle as possible. Also, it’s probably not the most optimized solution.

But it worked. It was solving a seemingly complex problem in the one of the simplest ways possible – by hiding it in plain sight.