fix shadow offside

jerosoler · Jun 15, 2021 · 57a11c3 · 57a11c3
1 parent dbae864
commit 57a11c3
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 83 deletions.
diff --git a/index.html b/index.html
@@ -140,7 +140,7 @@ <h3>Developed by Jero Soler</h3>
             --pixelbox-border-radius: 3;
             --pixelbox-border-color: #000000;
             --pixelbox-background-color: #ff9900;
-            --pixelbox-background-shadow-border: 30px;
+            --pixelbox-background-shadow-border: 300px;
             --pixelbox-background-shadow-color: #adafbc;
             --pixelbox-background-shadow-position: bottom-right; 
         }

diff --git a/pixelbox.js b/pixelbox.js
@@ -35,38 +35,15 @@ class pixelBox {
       .toString()
       .trim();
 
-    const pbRadius = (pbBorderRadius * pbBorder) / 2;
-    ctx.beginPath();
-    /* UP Left */
-    ctx.strokeStyle = pbBorderColor;
-    ctx.lineWidth = pbBorder;
-
-    /* UP LINE */
-    ctx.moveTo(pbBorder / 2 + pbRadius, 0);
-    ctx.lineTo(size.width - pbBorder / 2 - pbRadius, 0);
-
-    /* LEFT LINE */
-    ctx.moveTo(0, pbBorder / 2 + pbRadius);
-    ctx.lineTo(0, size.height - pbBorder / 2 - pbRadius);
-
-    /* Down LINE */
-    ctx.moveTo(pbBorder / 2 + pbRadius, size.height);
-    ctx.lineTo(size.width - pbBorder / 2 - pbRadius, size.height);
-
-    /* Right LINE */
-    ctx.moveTo(size.width, pbBorder / 2 + pbRadius);
-    ctx.lineTo(size.width, size.height - pbBorder / 2 - pbRadius);
-
     ctx.fillStyle = pbBackgroundColor;
-    ctx.closePath();
+
     ctx.fillRect(
       pbBorder / 2,
       pbBorder / 2,
       size.width - pbBorder,
       size.height - pbBorder
     );
     ctx.fill();
-    ctx.stroke();
 
     if (pbBackgroundShadowBorder != 0) {
       ctx.beginPath();
@@ -205,64 +182,6 @@ class pixelBox {
       ctx.stroke();
     }
     if (pbBorderRadius > 0) {
-      ctx.fillStyle = pbBorderColor;
-
-      for (var i = 1; i <= pbBorderRadius; i++) {
-        // LEFT TOP RADIUS
-        ctx.fillRect(
-          (pbBorder * (pbBorderRadius - i + 1)) / 2,
-          (pbBorder * i) / 2,
-          pbBorder / 2,
-          pbBorder / 2
-        );
-        ctx.clearRect(
-          0,
-          0,
-          (pbBorder * (pbBorderRadius - i + 2)) / 2,
-          (pbBorder * i) / 2
-        );
-
-        // RIGHT TOP RADIUS
-        ctx.fillRect(
-          size.width - (pbBorder * (pbBorderRadius - i + 2)) / 2,
-          (pbBorder * i) / 2,
-          pbBorder / 2,
-          pbBorder / 2
-        );
-        ctx.clearRect(
-          size.width - (pbBorder * (pbBorderRadius - i + 1)) / 2,
-          (pbBorder * i) / 2,
-          size.width,
-          pbBorder / 2
-        );
-        // LEFT BOTTOM RADIUS
-        ctx.fillRect(
-          (pbBorder * i) / 2,
-          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
-          pbBorder / 2,
-          pbBorder / 2
-        );
-        ctx.clearRect(
-          0,
-          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
-          (pbBorder * i) / 2,
-          size.height - (pbBorder * (pbBorderRadius - i)) / 2
-        );
-        // RIGHT BOTTOM RADIUS
-        ctx.fillRect(
-          size.width - pbBorder / 2 - (pbBorder * i) / 2,
-          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
-          pbBorder / 2,
-          pbBorder / 2
-        );
-        ctx.clearRect(
-          size.width - pbBorder / 2 - (pbBorder * i) / 2,
-          size.height - (pbBorder * (pbBorderRadius - i + 1)) / 2,
-          size.width,
-          size.height
-        );
-      }
-      ctx.fill();
       if (pbBackgroundShadowBorder != 0) {
         ctx.beginPath();
 
@@ -318,7 +237,103 @@ class pixelBox {
           ctx.stroke();
         }
       }
+
+      ctx.fillStyle = pbBorderColor;
+
+      for (var i = 1; i <= pbBorderRadius; i++) {
+        // LEFT TOP RADIUS
+        ctx.fillRect(
+          (pbBorder * (pbBorderRadius - i + 1)) / 2,
+          (pbBorder * i) / 2,
+          pbBorder / 2,
+          pbBorder / 2
+        );
+
+        // RIGHT TOP RADIUS
+        ctx.fillRect(
+          size.width - (pbBorder * (pbBorderRadius - i + 2)) / 2,
+          (pbBorder * i) / 2,
+          pbBorder / 2,
+          pbBorder / 2
+        );
+
+        // LEFT BOTTOM RADIUS
+        ctx.fillRect(
+          (pbBorder * i) / 2,
+          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
+          pbBorder / 2,
+          pbBorder / 2
+        );
+
+        // RIGHT BOTTOM RADIUS
+        ctx.fillRect(
+          size.width - pbBorder / 2 - (pbBorder * i) / 2,
+          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
+          pbBorder / 2,
+          pbBorder / 2
+        );
+      }
+      ctx.fill();
+
+      // CLEAR
+      for (var i = 0; i <= pbBorderRadius + 1; i++) {
+        // LEFT TOP RADIUS
+        ctx.clearRect(
+          0,
+          0,
+          (pbBorder * (pbBorderRadius - i + 2)) / 2,
+          (pbBorder * i) / 2
+        );
+        // RIGHT TOP RADIUS
+        ctx.clearRect(
+          size.width - (pbBorder * (pbBorderRadius - i + 1)) / 2,
+          (pbBorder * i) / 2,
+          size.width,
+          pbBorder / 2
+        );
+
+        // LEFT BOTTOM RADIUS
+        ctx.clearRect(
+          0,
+          size.height - (pbBorder * (pbBorderRadius - i + 2)) / 2,
+          (pbBorder * i) / 2,
+          size.height - (pbBorder * (pbBorderRadius - i)) / 2
+        );
+
+        // RIGHT BOTTOM RADIUS
+        ctx.clearRect(
+          size.width - pbBorder / 2 - (pbBorder * i) / 2,
+          size.height - (pbBorder * (pbBorderRadius - i + 1)) / 2,
+          size.width,
+          size.height
+        );
+      }
     }
+
+    const pbRadius = (pbBorderRadius * pbBorder) / 2;
+    ctx.beginPath();
+    /* UP Left */
+    ctx.strokeStyle = pbBorderColor;
+    ctx.lineWidth = pbBorder;
+
+    /* UP LINE */
+    ctx.moveTo(pbBorder / 2 + pbRadius, 0);
+    ctx.lineTo(size.width - pbBorder / 2 - pbRadius, 0);
+
+    /* LEFT LINE */
+    ctx.moveTo(0, pbBorder / 2 + pbRadius);
+    ctx.lineTo(0, size.height - pbBorder / 2 - pbRadius);
+
+    /* Down LINE */
+    ctx.moveTo(pbBorder / 2 + pbRadius, size.height);
+    ctx.lineTo(size.width - pbBorder / 2 - pbRadius, size.height);
+
+    /* Right LINE */
+    ctx.moveTo(size.width, pbBorder / 2 + pbRadius);
+    ctx.lineTo(size.width, size.height - pbBorder / 2 - pbRadius);
+
+    ctx.stroke();
+    ctx.closePath();
   }
 }