feat: inform users if canvas size is too big

index.html

@@ -1461,7 +1461,7 @@
           </p>
           <table>
             <tr
-              data-tip="Canvas width and height in pixels. Defines map size on generation, then map size cannot be changed and canvas size changes only visible area. Keep canvas size equal to screen size or less to improve performance. The best aspect ratio for maps is 2:1"
+              data-tip="Canvas width and height in pixels. Defines map size on generation that cannot be changed later. Always keep canvas size equal to your screen size or less. The best option is to use the default value. For full-globe maps use aspect ratio 2:1"
             >
               <td></td>
               <td>Canvas size</td>
@@ -1473,7 +1473,7 @@
               </td>
               <td>
                 <i
-                  data-tip="Toggle between screen size and initial canvas size"
+                  data-tip="Toggle between the current screen size and the initial canvas size"
                   id="toggleFullscreen"
                   class="icon-resize-full-alt"
                 ></i>
@@ -7877,7 +7877,7 @@
     <script src="modules/ui/stylePresets.js?v=1.89.11"></script>
 
     <script src="modules/ui/general.js?v=1.87.03"></script>
-    <script src="modules/ui/options.js?v=1.88.12"></script>
+    <script src="modules/ui/options.js?v=1.88.14"></script>
     <script src="main.js?v=1.89.12"></script>
 
     <script defer src="modules/relief-icons.js"></script>

modules/ui/options.js

@@ -160,9 +160,20 @@ optionsContent.addEventListener("click", function (event) {
 });
 
 function mapSizeInputChange() {
+  const $mapWidthInput = byId("mapWidthInput");
+  const $mapHeightInput = byId("mapHeightInput");
+
   changeMapSize();
-  localStorage.setItem("mapWidth", mapWidthInput.value);
-  localStorage.setItem("mapHeight", mapHeightInput.value);
+  localStorage.setItem("mapWidth", $mapWidthInput.value);
+  localStorage.setItem("mapHeight", $mapHeightInput.value);
+
+  const tooWide = +$mapWidthInput.value > window.innerWidth;
+  const tooHigh = +$mapHeightInput.value > window.innerHeight;
+
+  if (tooWide || tooHigh) {
+    const message = `Canvas size is larger than actual window size (${window.innerWidth} x ${window.innerHeight}). It can affect the performance if you are going to create a new map`;
+    tip(message, false, "warn", 4000);
+  }
 }
 
 // change svg size on manual size change or window resize, do not change graph size

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.13"; // generator version, update each time
+const version = "1.89.14"; // generator version, update each time
 
 {
   document.title += " v" + version;