Correction for the fullscreen on browsers using Webkit

Playground/css/index.css

@@ -56,7 +56,6 @@ body {
     width: 100%;
     height: 100%;
     touch-action: none;
-    z-index: 100;
 }
 #fpsLabel {
     position: absolute;
@@ -350,14 +349,6 @@ body {
     display: inline-block;
 }
 
-#exitFullPage {
-    display: none;
-    position: absolute;
-    bottom: 5px;
-    right: 5px;
-    z-index: 101;
-}
-
 /* MONACO */
 
 .monaco-editor .container:before,

Playground/debug.html

@@ -105,7 +105,7 @@
                     <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullpage</div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -180,7 +180,7 @@
                     <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullpage</div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -245,7 +245,7 @@
                     <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullpage</div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -307,7 +307,7 @@
                     <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullpage</div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
@@ -379,8 +379,6 @@
         </div>
     </div>
 
-    <div id="exitFullPage" class="button">Exit fullpage</div>
-
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script src="js/actions.js"></script>

Playground/index-local.html

@@ -69,7 +69,7 @@
                     <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullpage</div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -144,7 +144,7 @@
                     <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullpage</div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -209,7 +209,7 @@
                     <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullpage</div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -271,7 +271,7 @@
                     <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullpage</div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
@@ -343,8 +343,6 @@
         </div>
     </div>
 
-    <div id="exitFullPage" class="button">Exit fullpage</div>
-
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script src="js/actions.js"></script>

Playground/index.html

@@ -104,7 +104,7 @@
                     <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullpage</div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -179,7 +179,7 @@
                     <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullpage</div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -244,7 +244,7 @@
                     <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullpage</div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -306,7 +306,7 @@
                     <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullpage</div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
@@ -378,8 +378,6 @@
         </div>
     </div>
 
-    <div id="exitFullPage" class="button">Exit fullpage</div>
-
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script src="js/actions.js"></script>

Playground/index2_5.html

@@ -76,7 +76,7 @@
                     <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullpage</div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -151,7 +151,7 @@
                     <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullpage</div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -216,7 +216,7 @@
                     <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullpage</div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -278,7 +278,7 @@
                     <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullpage</div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
@@ -350,8 +350,6 @@
         </div>
     </div>
 
-    <div id="exitFullPage" class="button">Exit fullpage</div>
-
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script>

Playground/js/index.js

@@ -559,21 +559,22 @@
             setToMultipleID("currentFontSize", "innerHTML", "Font: " + size);
         };
 
-        document.getElementById("exitFullPage").onclick = function (evt) {
-            exitFullPage();
-        };
-
         // Fullscreen
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
+            if(document.webkitIsFullScreen) goFullPage();
+            else exitFullPage();
+        }, false);
+
         var goFullPage = function () {
-            document.getElementById("exitFullPage").style.display = "block";
             var canvasElement = document.getElementById("renderCanvas");
             canvasElement.style.position = "absolute";
             canvasElement.style.top = 0;
             canvasElement.style.left = 0;
+            canvasElement.style.zIndex = 100;
         }
         var exitFullPage = function () {
-            document.getElementById("exitFullPage").style.display = "none";
             document.getElementById("renderCanvas").style.position = "relative";
+            document.getElementById("renderCanvas").style.zIndex = 0;
         }
         var goFullscreen = function () {
             if (engine) {
@@ -703,7 +704,7 @@
         // Editor
         setToMultipleID("editorButton", "click", toggleEditor);
         // FullScreen
-        setToMultipleID("fullscreenButton", "click", goFullPage);
+        setToMultipleID("fullscreenButton", "click", goFullscreen);
         // Format
         setToMultipleID("formatButton", "click", formatCode);
         // Debug