Come posso rendere la tela HTML5 andare a schermo intero?

Question

Ho visto decine di tutorial su questo, e sembra semplice. Tutto ciò che voglio è rendere il mio elemento canvas HTML5 a schermo intero (come in tutto schermo intero, occupando tutto il monitor).

Ecco il mio 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> 

Ecco la mia Javascript (nel suo file .js proprie):

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

Ho testato la funzione; viene chiamato e uno dei tre if (cioè, dal momento che sto usando Firefox, mozRequestFullScreen) viene chiamato. Il mio browser lo apre in ogni demo che ho provato, ma non nel mio codice.

Qual è la variabile mancante? Devo avere Googled letteralmente ogni link che menziona questo, e ancora niente. Grazie.

Answer 1

Ok, ho trovato il problema. Questo non funziona:

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

Questo funziona:

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

Sì ... 3 ore più tardi.