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();
}
}