Как сделать HTML5 canvas полноэкранным?

Я видел десятки учебных пособий по этому вопросу, и это кажется прямо вперед. Все, что я хочу, это сделать мой элемент HTML5 canvas полноэкранным (как в общем полноэкранном режиме, занимая весь монитор).

вот мой 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>

вот мой Javascript (сам по себе .JS-файла):

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

я протестировал функцию; она вызывается и вызывается один из трех ifs (а именно, поскольку я использую Firefox, mozRequestFullScreen). Мой браузер открывает его на каждом демо, которое я тестировал, но не в моем собственном коде.

что это за переменная? Я, должно быть, гуглил буквально каждую ссылку, которая упоминает об этом, и все равно ничего. Спасибо.

6
canvas fullscreen html5 html5-canvas javascript

1 ответов

Ок, я нашел проблему. Это не работает:

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

это работает:

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

да... 3 часа спустя.

9