diff --git a/src/extensions/renderer/canvas/webgl/atlas.js b/src/extensions/renderer/canvas/webgl/atlas.js
index 41738b8f3..2d7b3c688 100644
--- a/src/extensions/renderer/canvas/webgl/atlas.js
+++ b/src/extensions/renderer/canvas/webgl/atlas.js
@@ -528,7 +528,7 @@ export class AtlasManager {
     }
   }
 
-  isRenderable(ele, type) {
+  isVisible(ele, type) {
     const opts = this.getRenderTypeOpts(type);
     return opts && opts.isVisible(ele);
   }
diff --git a/src/extensions/renderer/canvas/webgl/defaults.js b/src/extensions/renderer/canvas/webgl/defaults.js
index 06bc63448..bffe7420d 100644
--- a/src/extensions/renderer/canvas/webgl/defaults.js
+++ b/src/extensions/renderer/canvas/webgl/defaults.js
@@ -12,6 +12,6 @@ export const renderDefaults = defaults({
   getRotation: null,
   getRotationPoint: null,
   getRotationOffset: null,
-  isVisible: null,
+  isVisible: () => true,  // this is an extra check for visibility in addition to ele.visible()
   getPadding: null,
 });
\ No newline at end of file
diff --git a/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.js
index 6f99492dd..a029864ec 100644
--- a/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.js
+++ b/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.js
@@ -377,7 +377,7 @@ export class ElementDrawingWebGL {
 
   drawTexture(ele, eleIndex, type) {
     const { atlasManager } = this;
-    if(!atlasManager.isRenderable(ele, type)) {
+    if(!ele.visible() || !atlasManager.isVisible(ele, type)) {
       return;
     }
     if(!atlasManager.canAddToCurrentBatch(ele, type)) {
@@ -434,6 +434,9 @@ export class ElementDrawingWebGL {
 
 
   drawEdgeArrow(edge, eleIndex, prefix) {
+    if(!edge.visible()) {
+      return;
+    }
     // Edge points and arrow angles etc are calculated by the base renderer and cached in the rscratch object.
     const rs = edge._private.rscratch;
 
@@ -453,6 +456,7 @@ export class ElementDrawingWebGL {
       return; 
     }
 
+    // check shape after the x/y check because pstyle() is a bit slow
     const arrowShape = edge.pstyle(prefix + '-arrow-shape').value;
     if(arrowShape === 'none' ) {
       return; 
@@ -504,6 +508,14 @@ export class ElementDrawingWebGL {
 
 
   drawEdgeLine(edge, eleIndex) {
+    if(!edge.visible()) {
+      return;
+    }
+    const points = this.getEdgePoints(edge);
+    if(!points) {
+      return;
+    }
+
     // line style
     const baseOpacity = edge.pstyle('opacity').value;
     const lineOpacity = edge.pstyle('line-opacity').value;
@@ -511,8 +523,6 @@ export class ElementDrawingWebGL {
     const color = edge.pstyle('line-color').value;
     const opacity = baseOpacity * lineOpacity;
 
-    const points = this.getEdgePoints(edge);
-
     if(points.length/2 + this.instanceCount > this.maxInstances) {
       this.endBatch();
     }
@@ -591,6 +601,11 @@ export class ElementDrawingWebGL {
   
   getEdgePoints(edge) {
     const rs = edge._private.rscratch;
+
+    // if bezier ctrl pts can not be calculated, then die
+    if( rs.badLine || rs.allpts == null || isNaN(rs.allpts[0]) ){ // isNaN in case edge is impossible and browser bugs (e.g. safari)
+      return;
+    }
     const controlPoints = rs.allpts;
     if(controlPoints.length == 4) {
       return controlPoints;
diff --git a/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js b/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
index 653719395..17c242cbe 100644
--- a/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
+++ b/src/extensions/renderer/canvas/webgl/drawing-redraw-webgl.js
@@ -1,6 +1,3 @@
-// import { EdgeDrawing } from './drawing-edges-webgl';
-// import { EdgeBezierDrawing } from './drawing-edges-curved-webgl';
-// import { NodeDrawing } from './drawing-nodes-webgl';
 import { ElementDrawingWebGL } from './drawing-elements-webgl';
 import { RENDER_TARGET, renderDefaults } from './defaults';
 import { OverlayUnderlayRenderer } from './drawing-overlay';
@@ -50,16 +47,6 @@ CRp.initWebgl = function(opts, fns) {
     return label && label.value;
   };
 
-  // r.edgeDrawing = new EdgeBezierDrawing(r, gl, opts, renderDefaults({
-  //   getKey: fns.getLabelKey,
-  //   getBoundingBox: fns.getLabelBox,
-  //   drawElement: fns.drawLabel,
-  //   getRotation: getLabelRotation,
-  //   getRotationPoint: fns.getLabelRotationPoint,
-  //   getRotationOffset: fns.getLabelRotationOffset,
-  //   isVisible: isLabelVisible,
-  // }));
-
   r.eleDrawing = new ElementDrawingWebGL(r, gl, opts);
   const our = new OverlayUnderlayRenderer(r);
   
@@ -67,7 +54,6 @@ CRp.initWebgl = function(opts, fns) {
     getKey: fns.getStyleKey,
     getBoundingBox: fns.getElementBox,
     drawElement: fns.drawElement,
-    isVisible: ele => ele.visible(),
   }));
 
   r.eleDrawing.addTextureRenderType('node-label', renderDefaults({