Update

mods/zoom.js

@@ -7,10 +7,25 @@ const zoom_levels = [
     12
 ]
 window.zoom_data_div = null
-
 window.zoom_level = 1
 window.zoom_panning = [0,0]
 
+let colour_setting;
+
+dependOn("betterSettings.js", () => {
+    const settings_tab = new SettingsTab("zoom.js");
+    colour_setting = new Setting(
+        "Canvas background", 
+        "canvas_bkg", 
+        settingType.COLOR, 
+        false, 
+        defaultValue="#252525"
+    );
+
+    settings_tab.registerSettings(undefined, colour_setting)
+    settingsManager.registerTab(settings_tab)
+})
+
 function handle_zoom(direction){
     switch (direction){
         case "in":
@@ -73,8 +88,7 @@ function gen_button(row, col, html, click, nopos, id){
 function add_css(){
     const CSS = `
     #zm_data_div { margin-bottom: 10px }
-    #canvasDiv   { overflow: hidden }
-    #game        { border: solid white }
+    #canvasDiv   { overflow: hidden; background-color: var(--opac-85) }
 
     @media(pointer=coarse){
         #zm_floater_container#zm_floater_container { 
@@ -189,6 +203,7 @@ function add_zoom_floaters(){
     )
 
     const canvas_div = document.getElementById("canvasDiv")
+    canvas_div.style.backgroundColor = colour_setting?.value ?? "#252525"
     canvas_div.appendChild(container)
 }
 
@@ -199,17 +214,7 @@ function rescale(){
     const x = zoom_panning[0] * (pixelSize * scale)
     const y = zoom_panning[1] * (pixelSize * scale)
 
-    gameCanvas.style.transform = `translate(${x}px,${y}px) scale(${scale})`
-    
-    const width = 2 / scale
-    gameCanvas.style.borderTopWidth = 
-        `${zoom_panning[1] > 0 ? width : 0}px`
-    gameCanvas.style.borderBottomWidth = 
-        `${zoom_panning[1] < 0 ? width : 0}px`
-    gameCanvas.style.borderLeftWidth = 
-        `${zoom_panning[0] > 0 ? width : 0}px`
-    gameCanvas.style.borderRightWidth = 
-        `${zoom_panning[0] < 0 ? width : 0}px`
+    gameCanvas.style.transform = `translate(${x}px, ${y}px) translateX(-50%) scale(${scale})`
 }
 
 function log_info(){