diff --git a/externals/miXed/cyclone/sickle/Scope.c b/externals/miXed/cyclone/sickle/Scope.c
index fdc382f33612787d2fc81aac813b7dc425d6fa36..8b6084d646b53fa834933b8876df1e75f7cc4bab 100644
--- a/externals/miXed/cyclone/sickle/Scope.c
+++ b/externals/miXed/cyclone/sickle/Scope.c
@@ -722,6 +722,11 @@ static void scope_drawbg(t_scope *x, t_canvas *cv,
 	sys_vgui(".x%x.c create line %d %f %d %f\
  -width %f -tags {%s %s}\n", cv, x1, yy, x2, yy,
 		 SCOPE_GRIDWIDTH, x->x_gridtag, x->x_tag);
+    /* Here we draw the background, _and_ we create the paths
+       for the foreground paths. The paths will get filled with
+       data in scope_drawfgxy, etc. This should be cheaper than
+       creating and destroying a bunch of DOM objects on every
+       redraw. */
     gui_vmess("gui_scope_draw_bg", "xxsiifff",
         glist_getcanvas(cv),
         x,
diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index 57cf02f2919f22ed7ff779adfb89001c9bfa50e6..43f43b9af0165d4a9d883768ef9a2c7a2eaeae60 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -3053,14 +3053,18 @@ function gui_scope_draw_bg(cid, tag, bg_color, w, h, grid_width, dx, dy) {
         }),
         path,
         path_string = "",
+        foreground_path, // to be used for the foreground lines
         i, x, y, align_x, align_y;
+    // Path strings for the grid lines
+    // vertical lines...
     for (i = 0, x = dx; i < 7; i++, x += dx) {
         align_x = (x|0) === x ? x : Math.round(x);
-        path_string += ["M", 0, 0, align_x, 0, align_x, h].join(" ");
+        path_string += ["M", align_x, 0, "V", h].join(" ");
     }
+    // horizontal lines...
     for (i = 0, y = dy; i < 3; i++, y += dy) {
         align_y = (y|0) === y ? y : Math.round(y);
-        path_string += ["M", 0, 0, 0, align_y, w, align_y].join(" ");
+        path_string += ["M", 0, align_y, "H", w].join(" ");
     }
     path = create_item(cid, "path", {
         d: path_string,
@@ -3068,8 +3072,17 @@ function gui_scope_draw_bg(cid, tag, bg_color, w, h, grid_width, dx, dy) {
         stroke: "black",
         "stroke-width": grid_width,
     });
+    // We go ahead and create a path to be used in the foreground. We'll
+    // set the actual path data in the draw/redraw functions. Doing it this
+    // way will save us having to create and destroy DOM objects each time
+    // we redraw the foreground
+    foreground_path = create_item(cid, "path", {
+        fill: "none",
+        id: "fgxy"
+    });
     g.appendChild(bg);
     g.appendChild(path);
+    g.appendChild(foreground_path);
 }
 
 function add_popup(cid, popup) {