Alex Kehayias's Blog

Responsive HTML5 Canvas and Processing.js

You know what sucks about html5? You have to specify the canvas element with exact width and height. Out of the box that means none of our fancy responsive/liquid grids will be able to get along well with the canvas. What’s worse is that when you start using something like Processing for graphics/designs, it too demands a specified width and height. When dealing with patterns, if you don’t it’s not fitting in the right dimensions it’s just going to look dumb and at that point just use a background image.

Fuck that. Here’s what I want to do:

Use a Processing sketch (using processing.js) to create a dynamically created background pattern
Use a liquid layout (in this example a modified Bootstrap responsive grid) that fits the user’s window size exactly
When the browser is resized the background pattern should fit precisely in the dimensions of it’s container

You can see the final result on the homepage of my new personal site http://astronautradio.com

Note: The rest of the site isn’t fully responsive yet, but the homepage is

~~Javascript~~ Jquery to the Rescue

This is how we are going to handle it with jquery. When the page loads we are going to resize all of the canvas elements on the page to the width and height of the window (or any percentage based width/height element). We will set a global variable for the width and height which will be used by the Processing sketch when it draws itself on the target canvas. We will either redraw an existing sketch or create a new one if it doesn’t exist.

# CoffeeScript
# Assuming all the dependancies are already loaded
resizeSketches = ->
    canvas = $ 'canvas'
    # We're using backticks here so that these get set globally
    `jswidth = $(window).width()`
    `jsheight = $(window).height()`
    canvas.attr 'width', jswidth
    canvas.attr 'height', jsheight
    sketch = Processing.getInstanceById 'id_of_the_canvas_el'
    if sketch == undefined
        # We need the html element and the sketch to run on it
        # I'm using a compiled processing js sketch called triangles
        new Proocessing $("#id_of_the_canvas_el")[0], triangles
    else
        # This is a function I wrote on the sketch to redraw itself
        # It's different than the builtin processing redraw method 
        sketch.restart()
    
# Somewhere in you code
$(window).on 'resize', resizeSketches

Call this when the page loads and it’s also triggered on the resize event. Lastly we need to update our Processing sketch to set it’s height and width based on the global javascript variables we specified.

Processing.js makes it super easy to share values between your other js code and the processing code. This is probably the most understated feature of processing.js, the ability to mash it up with javascript. In your sketch simply change the setup function by adding the following:

$p.size(jswidth, jsheight);

Easy! Now all we need is a method to restart the sketch which will wipe the existing one and draw it again. Something like…

function restart() {
  $p.background(255);
  // Reset the size of any other shapes that
  // depend on the canvas dimensions then
  $p.loop();

Now when the page is loaded and every time it’s resized, the canvas containing a processing sketch will set it’s dimensions and redraw itself. Now go forth and do not fear the fixed dimensions of the html5 canvas.