diff --git a/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js
index 1d79c098c..427a31732 100644
--- a/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js
+++ b/src/extensions/renderer/canvas/webgl/drawing-nodes-webgl.js
@@ -11,7 +11,8 @@ const initDefaults = defaults({
   getRotationPoint: null,
   getRotationOffset: null,
   isVisible: null,
-  getOverlayUnderlayStyle: null
+  getOverlayUnderlayStyle: null,
+  isOverlayOrUnderlay: false,
 });
 
 const atlasSize = 8192; // square atlas, each side has this many pixels, should be power of 2
@@ -432,7 +433,7 @@ export class NodeDrawing {
       return texID;
     };
 
-    const drawBody = () => {
+    const drawBodyOrLabel = () => {
       const { atlas, texIndex } = this.getOrCreateTexture(node, opts);
       const texID = getTexIdForBatch(atlas);
       const { xOffset, yOffset } = getTexOffsets(texIndex);
@@ -441,11 +442,8 @@ export class NodeDrawing {
       bufferInstanceData(texID, xOffset, yOffset, w, h);
     };
 
-    const drawOverlayUnderlay = (overlayOrUnderlay) => {
-      const style = opts.getOverlayUnderlayStyle(node, overlayOrUnderlay);
-      if(!style || style.opacity <= 0)
-        return;
-
+    const drawOverlayUnderlay = () => {
+      const style = opts.getOverlayUnderlayStyle(node);
       const { opacity, color, shape, padding } = style; // Ignore radius for now
 
       const texIndex = this.overlayUnderlay.getTexIndex(shape);
@@ -460,9 +458,11 @@ export class NodeDrawing {
       bufferInstanceData(texID, xOffset, yOffset, w, h, padding, webglColor);
     }
 
-    drawOverlayUnderlay('underlay');
-    drawBody();
-    drawOverlayUnderlay('overlay')
+    if(opts.isOverlayOrUnderlay) {
+      drawOverlayUnderlay();
+    } else {
+      drawBodyOrLabel();
+    }
 
     if(this.instanceCount >= this.maxInstances) {
       this.endBatch();
diff --git a/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
index 7eae2f216..76685aa91 100644
--- a/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
+++ b/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
@@ -24,21 +24,24 @@ CRp.initWebgl = function(options, fns) {
     return label && label.value;
   }
 
-  const getNodeOverlayUnderlayStyle = (node, overlayOrUnderlay) => {
+  const getNodeOverlayUnderlayStyle = overlayOrUnderlay => node => {
     const opacity = node.pstyle(`${overlayOrUnderlay}-opacity`).value;
-    if(opacity <= 0)
-      return null;
     const color = node.pstyle(`${overlayOrUnderlay}-color`).value;
     const shape = node.pstyle(`${overlayOrUnderlay}-shape`).value;
     const padding = node.pstyle( `${overlayOrUnderlay}-padding` ).pfValue;
-    return { opacity, color, shape, padding };
+    return { opacity, color, shape, padding }; // TODO need to add radius at some point
   };
-  const getLabelOverlayUnderlayStyle = () => null;
+
+  const isNodeOverlayUnderlayVisible = overlayOrUnderlay => node => {
+    const opacity = node.pstyle(`${overlayOrUnderlay}-opacity`).value;
+    return opacity > 0;
+  };
+
   
   r.edgeDrawing = new EdgeDrawing(r, gl);
   r.nodeDrawing = new NodeDrawing(r, gl);
   
-  r.nodeDrawing.addRenderType('node', {
+  r.nodeDrawing.addRenderType('node-body', {
     getKey: fns.getStyleKey,
     getBoundingBox: fns.getElementBox,
     drawElement: fns.drawElement,
@@ -46,7 +49,6 @@ CRp.initWebgl = function(options, fns) {
     getRotationOffset: fns.getElementRotationOffset,
     getRotation: getZeroRotation,
     isVisible: isNodeVisible,
-    getOverlayUnderlayStyle: getNodeOverlayUnderlayStyle,
   })
 
   r.nodeDrawing.addRenderType('node-label', {
@@ -57,7 +59,22 @@ CRp.initWebgl = function(options, fns) {
     getRotationOffset: fns.getLabelRotationOffset,
     getRotation: getLabelRotation,
     isVisible: isLabelVisible,
-    getOverlayUnderlayStyle: getLabelOverlayUnderlayStyle,
+  });
+
+  r.nodeDrawing.addRenderType('node-overlay', {
+    isOverlayOrUnderlay: true,
+    getBoundingBox: fns.getElementBox,
+    getRotation: getZeroRotation,
+    isVisible: isNodeOverlayUnderlayVisible('overlay'),
+    getOverlayUnderlayStyle: getNodeOverlayUnderlayStyle('overlay'),
+  });
+
+  r.nodeDrawing.addRenderType('node-underlay', {
+    isOverlayOrUnderlay: true,
+    getBoundingBox: fns.getElementBox,
+    getRotation: getZeroRotation,
+    isVisible: isNodeOverlayUnderlayVisible('underlay'),
+    getOverlayUnderlayStyle: getNodeOverlayUnderlayStyle('underlay'),
   });
 }
 
@@ -153,8 +170,10 @@ CRp.renderWebgl = function(options) {
         if(prevEle?.isEdge()) {
           edgeDrawing.endBatch();
         }
-        nodeDrawing.draw(ele, 'node');
+        nodeDrawing.draw(ele, 'node-underlay');
+        nodeDrawing.draw(ele, 'node-body');
         nodeDrawing.draw(ele, 'node-label');
+        nodeDrawing.draw(ele, 'node-overlay');
       } else {
         if(prevEle?.isNode()) {
           nodeDrawing.endBatch();