From 57a11c3b8c99138c421f06e550c83a31c1abc6f8 Mon Sep 17 00:00:00 2001 From: Jero Soler Date: Tue, 15 Jun 2021 08:56:30 +0200 Subject: [PATCH] fix shadow offside --- index.html | 2 +- pixelbox.js | 179 ++++++++++++++++++++++++++++------------------------ 2 files changed, 98 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 9b2f0a4..f0f4d45 100644 --- a/index.html +++ b/index.html @@ -140,7 +140,7 @@

Developed by Jero Soler

--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 index d15b781..efe4468 100644 --- a/pixelbox.js +++ b/pixelbox.js @@ -35,30 +35,8 @@ 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, @@ -66,7 +44,6 @@ class pixelBox { 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(); } }