Shrink canvas when shrinking window width

mibpov.js

@@ -13,6 +13,9 @@ const RESIZE_CORNER = 18;
 // Minimum canvas side length (px)
 const MIN_CANVAS_SIZE = 100;
 
+// Minimum required distance of canvas from the right page side
+const CANVAS_PAGE_MARGIN_RIGHT = 20
+
 // Grid widths. We use lower grid widths
 // as the grid becomes more crammed.
 // There are 4 levels from 0 to 3.
@@ -1285,9 +1288,35 @@ function initBiomeColorSelectors() {
 	}
 }
 
+function fitCanvasInBody() {
+	// Get x,y position of canvas
+	let bodyRect = document.body.getBoundingClientRect();
+	let canvasRect = voronoiCanvas.getBoundingClientRect();
+	let cx = canvasRect.left - bodyRect.left;
+	let cy = canvasRect.top - bodyRect.top;
+
+	// Calculate new size
+	let rx = window.innerWidth - cx - CANVAS_PAGE_MARGIN_RIGHT;
+
+	let oldWidth = voronoiCanvas.width;
+	let newWidth = Math.max(MIN_CANVAS_SIZE, rx);
+	if (newWidth < oldWidth) {
+		// Resize
+		if (voronoiCanvas.height === voronoiCanvas.width) {
+			voronoiCanvas.height = newWidth;
+		}
+		voronoiCanvas.width = newWidth;
+		draw(false);
+	}
+}
+
 /***** EVENTS *****/
 
+
 /* Body events */
+window.onresize = function(event) {
+	fitCanvasInBody();
+}
 document.body.onmousemove = function(event) {
 	if (resizing) {
 		// Get x,y position of canvas
@@ -1301,7 +1330,7 @@ document.body.onmousemove = function(event) {
 		let ry = event.pageY - resizing_start_pos_y - cy;
 
 		// Limit the width
-		let maxX = (bodyRect.width - cx) - 20;
+		let maxX = (bodyRect.width - cx) - CANVAS_PAGE_MARGIN_RIGHT;
 
 		// Resize
 		voronoiCanvas.width = Math.min(maxX, Math.max(MIN_CANVAS_SIZE, resizing_start_size_x + rx));
@@ -1636,3 +1665,4 @@ window.addEventListener("load", repopulateBiomeSelector);
 window.addEventListener("load", updateWidgetStates);
 window.addEventListener("load", updateAltitudeText);
 window.addEventListener("load", unhideContent);
+window.addEventListener("load", fitCanvasInBody);