How can I make an HTML5 canvas in full screen?

Question

I have seen dozens of textbooks about this, and it seems straightforward. All I want to do is make my HTML5 canvas element in full screen mode (as in full full screen mode, taking the entire monitor).

Here is 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 is 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 is called and one of the three ifs (namely, since I use Firefox, mozRequestFullScreen) is called. My browser opens it on every demo I tested, but not in my own code.

What is the missing variable? Google must have literally all the links that mention this, and still nothing. Thanks.

Answer 1

Ok, I found a problem. This does not work:

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

This job:

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

Yes ... in 3 hours.