Is there a quick way to make the canvas fullscreen? For example, if the user types F11 and the canvas is currently selected, I would like it to open the canvas in fullscreen.
That’s not built-in, but you can use the Fullscreen API for that:
function viewFullScreen(show) {
if (show === undefined) show = !isFullScreen();
if (show) {
if (document.body.requestFullscreen) document.body.requestFullscreen();
else if (document.body.webkitRequestFullScreen) document.body.webkitRequestFullScreen();
else if (document.body.mozRequestFullScreen) document.body.mozRequestFullScreen();
else if (document.body.msRequestFullscreen) document.body.msRequestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
else if (document.msExitFullscreen) document.msExitFullscreen();
}
}
function isFullScreen() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
}
Just call viewFullScreen()
repeatedly to toggle.
Thank you! I got it working with the following modification:
// shows the canvas in fullscreen
function viewFullScreen(show) {
if (show === undefined) show = !isFullScreen();
canvas = document.getElementById("diagram");
if (show) {
if (canvas.requestFullscreen) canvas.requestFullscreen();
else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
else if (canvas.msRequestFullscreen) canvas.msRequestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
else if (document.msExitFullscreen) document.msExitFullscreen();
}
}
1 Like
I am working on the same functionality in angular and I need to show the diagram to full screen when I click on a button. I am unable to do that in angular. i need to write in type script by using full screen api. Help me
Showing a diagram fullscreen really doesn’t have anything to do with GoJS. But the above code shows how to do it.