Making the Canvas Fullscreen

GoJS
#1

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.

#2

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.

#3

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
#4

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

#5

Showing a diagram fullscreen really doesn’t have anything to do with GoJS. But the above code shows how to do it.