How can I make the HTML5 canvas go fullscreen?

Question

I have seen dozens of tutorials on this, and it seems straight forward. All I want is to make my HTML5 canvas element go full-screen (as in total full-screen, taking up the whole monitor).

Here's my HTML:

<p><canvas id="screen" width="800" height="500"
    style="background: #FFFFFF; border: 5px solid black;" role="img">
        Your browser does not support the canvas element.
</canvas></p>

<p><a href="javascript:goFullScreen();">Go Fullscreen</a></p>

Here's my Javascript (in its own .js file):

function goFullScreen(){
    var canvas = document.getElementById("screen");
    if(canvas.requestFullScreen)
        canvas.requestFullScreen();
    else if(canvas.webkitRequestFullScreen)
        canvas.webkitRequestFullScreen();
    else if(canvas.mozRequestFullScreen)
        canvas.mozRequestFullScreen();
}

I tested the function; it gets called and one of the three ifs (namely, since I'm using Firefox, mozRequestFullScreen) gets called. My browser opens it up on every demo that I've tested, but not in my own code.

What's the missing variable? I must have Googled literally every link that mentions this, and still nothing. Thanks.

Answer 1

Okay, I found the problem. This does not work:

<p><a href="javascript:goFullScreen();">Go Fullscreen</a></p>

This DOES work:

<p><button onclick="goFullScreen();">Go Fullscreen</button></p>

Yeah... 3 hours later.