From 46f5db055d8835fc9bdeecfad909852bd1a4a580 Mon Sep 17 00:00:00 2001
From: adroitwhiz <adroitwhiz@protonmail.com>
Date: Fri, 8 Nov 2019 09:17:59 -0500
Subject: [PATCH] Handle null color in bitmap shape tools

---
 src/helper/bit-tools/oval-tool.js |  3 ++-
 src/helper/bit-tools/rect-tool.js |  3 ++-
 src/helper/bitmap.js              | 17 +++++++++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/helper/bit-tools/oval-tool.js b/src/helper/bit-tools/oval-tool.js
index 194f5ac5..f404aab1 100644
--- a/src/helper/bit-tools/oval-tool.js
+++ b/src/helper/bit-tools/oval-tool.js
@@ -76,7 +76,8 @@ class OvalTool extends paper.Tool {
                 this.thickness = this.oval.strokeWidth;
             }
             this.filled = this.oval.strokeWidth === 0;
-            this.color = this.filled ? this.oval.fillColor.toCSS() : this.oval.strokeColor.toCSS();
+            const color = this.filled ? this.oval.fillColor : this.oval.strokeColor;
+            this.color = color ? color.toCSS() : null;
         } else if (this.oval && this.oval.isInserted() && !this.oval.selected) {
             // Oval got deselected
             this.commitOval();
diff --git a/src/helper/bit-tools/rect-tool.js b/src/helper/bit-tools/rect-tool.js
index 50362c7b..d1349b95 100644
--- a/src/helper/bit-tools/rect-tool.js
+++ b/src/helper/bit-tools/rect-tool.js
@@ -76,7 +76,8 @@ class RectTool extends paper.Tool {
                 this.thickness = this.rect.strokeWidth;
             }
             this.filled = this.rect.strokeWidth === 0;
-            this.color = this.filled ? this.rect.fillColor.toCSS() : this.rect.strokeColor.toCSS();
+            const color = this.filled ? this.rect.fillColor : this.rect.strokeColor;
+            this.color = color ? color.toCSS() : null;
         } else if (this.rect && this.rect.isInserted() && !this.rect.selected) {
             // Rectangle got deselected
             this.commitRect();
diff --git a/src/helper/bitmap.js b/src/helper/bitmap.js
index f5194375..da27f42b 100644
--- a/src/helper/bitmap.js
+++ b/src/helper/bitmap.js
@@ -748,9 +748,13 @@ const commitOvalToBitmap = function (oval, bitmap) {
     const radiusY = Math.abs(oval.size.height / 2);
     const context = bitmap.getContext('2d');
     const filled = oval.strokeWidth === 0;
-    context.fillStyle = filled ?
-        oval.fillColor && oval.fillColor.toCSS() : oval.strokeColor && oval.strokeColor.toCSS();
 
+    const canvasColor = filled ? oval.fillColor : oval.strokeColor;
+    // If the color is null (e.g. fully transparent/"no fill"), don't bother drawing anything,
+    // and especially don't try calling `toCSS` on it
+    if (!canvasColor) return;
+
+    context.fillStyle = canvasColor.toCSS();
     const drew = drawEllipse({
         position: oval.position,
         radiusX,
@@ -771,8 +775,13 @@ const commitRectToBitmap = function (rect, bitmap) {
     const tmpCanvas = createCanvas();
     const context = tmpCanvas.getContext('2d');
     const filled = rect.strokeWidth === 0;
-    context.fillStyle = filled ?
-        rect.fillColor && rect.fillColor.toCSS() : rect.strokeColor && rect.strokeColor.toCSS();
+
+    const canvasColor = filled ? rect.fillColor : rect.strokeColor;
+    // If the color is null (e.g. fully transparent/"no fill"), don't bother drawing anything,
+    // and especially don't try calling `toCSS` on it
+    if (!canvasColor) return;
+
+    context.fillStyle = canvasColor.toCSS();
     if (filled) {
         fillRect(rect, context);
     } else {