Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It is a fairly common need when doing stuff with <canvas> that you want as much screen real estate as you can get. Ideally covering the browser window edge to edge. This should be as simple as this:

<canvas id="my-canvas"></canvas>

var can = document.getElementById("my-canvas");

can.style.width = window.innerWidth + "px";
can.style.height = window.innerHeight + "px";

And it is that easy. Except… sadly on CodePen.

Update: As of our Boomerang update, this is no longer a problem and will work as easily as the code above.

There is a little browser bug that makes us have to do a tiny bit more work to get this working. The issue is that CodePen renders the previews of the code you create in iframes. We do that to give a completely clean slate for demos as well as provide some security. When you change your code, we refresh that preview in the iframe. We literally re-render the entire demo. We do that so it behaves as expected, and things like your DOM ready functions will fire correctly. But there are some quirks. One of which is that when you re-render an iframe, sometimes

window.innerHeight is a wrong value or zero. But just for a split nanosecond at the beginning of the render. If you slow down the execution of the JavaScript at all, the value will be fine.

var can = document.getElementById("my-canvas");

can.style.width = window.innerWidth + "px";
setTimeout(function() {
  can.style.height = window.innerHeight + "px";
}, 0);

This is in Blink/WebKit browsers like Chrome/Safari, not Gecko browsers like Firefox.

Keeping it Full Size

The preview area in the editor can be resized, and of course browser windows can be resized. Your canvas is set to a fixed size now if you use the code above, and will stay that way unless you change it. So, it can be a good idea to resize that canvas when the window changes. You can do that like this:

var can = document.getElementById("my-canvas");

function resizeCanvas() {
  can.style.width = window.innerWidth + "px";
  setTimeout(function() {
    can.style.height = window.innerHeight + "px";
  }, 0);
};

// Webkit/Blink will fire this on load, but Gecko doesn't.
window.onresize = resizeCanvas;

// So we fire it manually...
resizeCanvas();

With jQuery that would be like:

var win = $(window);

function resize() {
  $("#my-canvas") // best to save a reference of this
    .width(win.width())
    .height(win.height());
}

win.resize(resize).resize();

Scrollbars

You also may trigger scrollbars by setting a canvas to the exact full size of the window. Seems strange since it’s not bigger than the window, it’s the exact reported size. But even if somehow it becomes 1px bigger, that will trigger a scrollbar and then that scrollbar will trigger the scrollbar on the other axis. I’ve found if you subtract 4px from the height of window.innerHeight before applying you’re OK, but that leaves a 1px gap at the bottom. Blech. If every single pixel isn’t vital in your demo (like it might be in a game), you can just leave it as is and fix it with CSS.

body {
  margin: 0;
  overflow: hidden;
}

Demo

Here’s that all working:

See the Pen Full Size Canvas, Even on Resize by Chris Coyier (@chriscoyier) on CodePen

If it truly is a browser bug that causes the window.innerHeight wrongness we’ll see who we can tap to get it fixed. Or if we can figure out a fix on the CodePen side without being too intrusive, we’ll do that.