Getting a fullscreen <canvas>

One of the demos that Dave and I worked on for our Processing.js Workshop Tour was a full page Processing.js sketch that displayed words from tweets containing “#OWS”:

OWS Twitter Wall

Occupy your browser

You can see a live demo of this here, and the code for it on Github. One problem we ran into while developing this was getting a full page canvas to appear without scrollbars. We found that you could use window.innerWidth reliably, but window.innerHeight would return a value that would make scrollbars appear. We ended up just subtracting 10 pixels from window.innerHeight and calling it a day, as seen here.

However, I was determined to solve this issue. Here’s a bare-bones jsfiddle showing the problem:

As you can see, the div is slightly taller than the canvas, even with the standard css reset applied. The key thing here was setting line-height to 0 (thanks Daniel!). Once you do that, then the div will be the same height as the canvas. Wondering as to why, I asked our font expert Pomax, and he got an answer for me:

Pomax: <divya> canvas is inline block
Pomax: <divya> err inline
Pomax: <divya> its not a bug
Pomax: <divya> its a feature
Pomax: <divya> much like <img>

TL;DR

So, the next time you need a full page canvas?:

* {
margin: 0;
padding: 0;
line-height: 0;
}

This entry was posted in Open Source and tagged , . Bookmark the permalink.