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”:
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>
So, the next time you need a full page canvas?: