diff --git a/web/render_2d.js b/web/render_2d.js
index a18bd35..8085081 100644
--- a/web/render_2d.js
+++ b/web/render_2d.js
@@ -5,14 +5,11 @@ import { RANGE_SCALE } from "./viewer.js";
 class render_2d {
   // The constructor gets two canvases, the real drawing one and one for background data
   // such as range circles etc.
-  constructor(canvas_dom, canvas_background_dom) {
+  constructor(canvas_dom, canvas_background_dom, drawBackground) {
     this.dom = canvas_dom;
     this.background_dom = canvas_background_dom;
-    this.redrawCanvas();
-  }
-
-  setDrawBackgroundCallback(drawBackground) {
     this.drawBackgroundCallback = drawBackground;
+    this.redrawCanvas();
   }
 
   // This is called as soon as it is clear what the number of spokes and their max length is
diff --git a/web/render_webgl.js b/web/render_webgl.js
index ec4b6d9..22fc8c6 100644
--- a/web/render_webgl.js
+++ b/web/render_webgl.js
@@ -5,10 +5,11 @@ import { RANGE_SCALE } from "./viewer.js";
 class render_webgl {
   // The constructor gets two canvases, the real drawing one and one for background data
   // such as range circles etc.
-  constructor(canvas_dom, canvas_background_dom) {
+  constructor(canvas_dom, canvas_background_dom, drawBackground) {
     this.dom = canvas_dom;
     this.background_dom = canvas_background_dom;
     this.background_ctx = this.background_dom.getContext("2d");
+    this.drawBackgroundCallback = drawBackground;
 
     const gl = this.dom.getContext("webgl2");
     if (!gl) {
diff --git a/web/render_webgl_alt.js b/web/render_webgl_alt.js
index 6435112..74d5eed 100644
--- a/web/render_webgl_alt.js
+++ b/web/render_webgl_alt.js
@@ -5,10 +5,11 @@ import { RANGE_SCALE } from "./viewer.js";
 class render_webgl_alt {
   // The constructor gets two canvases, the real drawing one and one for background data
   // such as range circles etc.
-  constructor(canvas_dom, canvas_background_dom) {
+  constructor(canvas_dom, canvas_background_dom, drawBackground) {
     this.dom = canvas_dom;
     this.background_dom = canvas_background_dom;
     this.background_ctx = this.background_dom.getContext("2d");
+    this.drawBackgroundCallback = drawBackground;
 
     let gl = this.dom.getContext("webgl2", {
       preserveDrawingBuffer: true,
diff --git a/web/viewer.js b/web/viewer.js
index 584c1b5..9da8e73 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -41,17 +41,20 @@ window.onload = function () {
     if (draw == "2d") {
       renderer = new render_2d(
         document.getElementById("myr_canvas"),
-        document.getElementById("myr_canvas_background")
+        document.getElementById("myr_canvas_background"),
+        drawBackground
       );
     } else if (draw == "alt") {
       renderer = new render_webgl_alt(
         document.getElementById("myr_canvas_webgl"),
-        document.getElementById("myr_canvas_background")
+        document.getElementById("myr_canvas_background"),
+        drawBackground
       );
     } else {
       renderer = new render_webgl(
         document.getElementById("myr_canvas_webgl"),
-        document.getElementById("myr_canvas_background")
+        document.getElementById("myr_canvas_background"),
+        drawBackground
       );
     }
   } catch (e) {
@@ -59,12 +62,11 @@ window.onload = function () {
     console.log("Falling back on 2d context");
     renderer = new render_2d(
       document.getElementById("myr_canvas"),
-      document.getElementById("myr_canvas_background")
+      document.getElementById("myr_canvas_background"),
+      drawBackground
     );
   }
 
-  renderer.setDrawBackgroundCallback(drawBackground);
-
   loadRadar(id);
 
   window.onresize = function () {
@@ -134,7 +136,7 @@ function hexToRGBA(hex) {
   return a;
 }
 
-function controlUpdate(range, control, controlValue) {
+function controlUpdate(control, controlValue) {
   if (control.name == "Range" && control.descriptions) {
     let range = parseFloat(controlValue.value);
     rangeDescriptions = control.descriptions;
@@ -203,20 +205,21 @@ function drawBackground(obj, txt) {
 
   obj.background_ctx.fillStyle = "lightgrey";
 
-  noTransmitAngles.forEach((e) => {
-    if (e && e[0]) {
-      obj.background_ctx.beginPath();
-      obj.background_ctx.arc(
-        obj.center_x,
-        obj.center_y,
-        obj.beam_length * 2,
-        (2 * Math.PI * e[0]) / obj.spokes,
-        (2 * Math.PI * e[1]) / obj.spokes
-      );
-      obj.background_ctx.fill();
-    }
-  });
-
+  if (typeof noTransmitAngles == "array") {
+    noTransmitAngles.forEach((e) => {
+      if (e && e[0]) {
+        obj.background_ctx.beginPath();
+        obj.background_ctx.arc(
+          obj.center_x,
+          obj.center_y,
+          obj.beam_length * 2,
+          (2 * Math.PI * e[0]) / obj.spokes,
+          (2 * Math.PI * e[1]) / obj.spokes
+        );
+        obj.background_ctx.fill();
+      }
+    });
+  }
   obj.background_ctx.fillStyle = "lightblue";
   this.background_ctx.fillText(txt, 5, 20);
 }