From c16b31baa1ab0ff71f6877d7ba57e61af3f2110a Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Thu, 31 Oct 2024 16:19:32 +0100
Subject: [PATCH 01/10] fix: added support to border and radius for canvas2d

---
 .../renderers/canvas/CanvasCoreRenderer.ts    | 100 +++++++++++++++++-
 .../canvas/internal/C2DShaderUtils.ts         | 100 +++++++++++++++++-
 .../renderers/canvas/internal/ColorUtils.ts   |  14 +++
 .../webgl/shaders/effects/RadiusEffect.ts     |   2 -
 .../webgl/shaders/effects/ShaderEffect.ts     |   1 -
 5 files changed, 210 insertions(+), 7 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index 0fb82473..affdd81c 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -30,9 +30,10 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasCoreTexture } from './CanvasCoreTexture.js';
-import { getRadius } from './internal/C2DShaderUtils.js';
+import { getBorder, getRadius, strokeLine } from './internal/C2DShaderUtils.js';
 import {
   formatRgba,
+  parseBorderColor,
   parseColor,
   type IParsedColor,
 } from './internal/ColorUtils.js';
@@ -134,8 +135,22 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
     const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
     const radius = quad.shader ? getRadius(quad) : 0;
+    const border = quad.shader ? getBorder(quad) : undefined;
+    const borderTop = quad.shader ? getBorder(quad, 'Top') : undefined;
+    const borderRight = quad.shader ? getBorder(quad, 'Right') : undefined;
+    const borderBottom = quad.shader ? getBorder(quad, 'Bottom') : undefined;
+    const borderLeft = quad.shader ? getBorder(quad, 'Left') : undefined;
 
-    if (hasTransform || hasClipping || radius) {
+    if (
+      hasTransform ||
+      hasClipping ||
+      radius ||
+      border ||
+      borderTop ||
+      borderRight ||
+      borderBottom ||
+      borderLeft
+    ) {
       ctx.save();
     }
 
@@ -167,6 +182,76 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.clip(path);
     }
 
+    if (border && border.width) {
+      const pixelRatio = this.pixelRatio;
+      const borderWidth = border.width * pixelRatio;
+      const borderColor = formatRgba(parseBorderColor(border.color ?? 0));
+
+      ctx.beginPath();
+      ctx.lineWidth = borderWidth;
+      ctx.strokeStyle = borderColor;
+      ctx.globalAlpha = alpha;
+      if (radius) {
+        ctx.roundRect(tx, ty, width, height, radius);
+        ctx.stroke();
+      } else {
+        ctx.strokeRect(tx, ty, width, height);
+      }
+      ctx.globalAlpha = 1;
+    } else {
+      if (borderTop) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderTop.width,
+          borderTop.color,
+          'Top',
+        );
+      }
+
+      if (borderRight) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderRight.width,
+          borderRight.color,
+          'Right',
+        );
+      }
+
+      if (borderBottom) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderBottom.width,
+          borderBottom.color,
+          'Bottom',
+        );
+      }
+
+      if (borderLeft) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderLeft.width,
+          borderLeft.color,
+          'Left',
+        );
+      }
+    }
+
     if (ctxTexture) {
       const image = ctxTexture.getImage(color);
       ctx.globalAlpha = alpha;
@@ -211,7 +296,16 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.fillRect(tx, ty, width, height);
     }
 
-    if (hasTransform || hasClipping || radius) {
+    if (
+      hasTransform ||
+      hasClipping ||
+      radius ||
+      border ||
+      borderTop ||
+      borderRight ||
+      borderBottom ||
+      borderLeft
+    ) {
       ctx.restore();
     }
   }
diff --git a/src/core/renderers/canvas/internal/C2DShaderUtils.ts b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
index ffc6a6cf..861cbca1 100644
--- a/src/core/renderers/canvas/internal/C2DShaderUtils.ts
+++ b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
@@ -18,20 +18,118 @@
  */
 
 import type { QuadOptions } from '../../CoreRenderer.js';
+import type { BorderEffectProps } from '../../webgl/shaders/effects/BorderEffect.js';
+import type { RadiusEffectProps } from '../../webgl/shaders/effects/RadiusEffect.js';
+import type { EffectDescUnion } from '../../webgl/shaders/effects/ShaderEffect.js';
 import {
   ROUNDED_RECTANGLE_SHADER_TYPE,
   UnsupportedShader,
 } from '../shaders/UnsupportedShader.js';
+import { formatRgba, parseBorderColor } from './ColorUtils.js';
 
 /**
  * Extract `RoundedRectangle` shader radius to apply as a clipping
  */
-export function getRadius(quad: QuadOptions): number {
+export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
   if (quad.shader instanceof UnsupportedShader) {
     const shType = quad.shader.shType;
     if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
       return (quad.shaderProps?.radius as number) ?? 0;
+    } else if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return effect.type === 'radius' && effect?.props?.radius;
+        });
+
+        return (effect && effect.type === 'radius' && effect.props.radius) || 0;
+      }
     }
   }
   return 0;
 }
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping */
+export function getBorder(
+  quad: QuadOptions,
+  direction: '' | 'Top' | 'Right' | 'Bottom' | 'Left' = '',
+): BorderEffectProps | undefined {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return effect.type === `border${direction}` && effect?.props;
+        });
+
+        return (
+          (effect && effect.type === `border${direction}` && effect.props) ||
+          undefined
+        );
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function strokeLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  lineWidth = 0,
+  color: number | undefined,
+  direction: 'Top' | 'Right' | 'Bottom' | 'Left',
+) {
+  if (!lineWidth) {
+    return;
+  }
+
+  let sx,
+    sy = 0;
+  let ex,
+    ey = 0;
+
+  switch (direction) {
+    case 'Top':
+      sx = x;
+      sy = y;
+      ex = width + x;
+      ey = y;
+      break;
+    case 'Right':
+      sx = x + width;
+      sy = y;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Bottom':
+      sx = x;
+      sy = y + height;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Left':
+      sx = x;
+      sy = y;
+      ex = x;
+      ey = y + height;
+      break;
+  }
+  ctx.beginPath();
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = formatRgba(parseBorderColor(color ?? 0));
+  ctx.moveTo(sx, sy);
+  ctx.lineTo(ex, ey);
+  ctx.stroke();
+}
diff --git a/src/core/renderers/canvas/internal/ColorUtils.ts b/src/core/renderers/canvas/internal/ColorUtils.ts
index 3265ca59..e795cade 100644
--- a/src/core/renderers/canvas/internal/ColorUtils.ts
+++ b/src/core/renderers/canvas/internal/ColorUtils.ts
@@ -47,6 +47,20 @@ export function parseColor(abgr: number): IParsedColor {
   return { isWhite: false, a, r, g, b };
 }
 
+/**
+ * Extract color components
+ */
+export function parseBorderColor(rgba: number): IParsedColor {
+  if (rgba === 0xffffffff) {
+    return WHITE;
+  }
+  const r = (rgba >>> 24) & 0xff;
+  const g = (rgba >>> 16) & 0xff & 0xff;
+  const b = (rgba >>> 8) & 0xff & 0xff;
+  const a = (rgba & 0xff & 0xff) / 255;
+  return { isWhite: false, r, g, b, a };
+}
+
 /**
  * Format a parsed color into a rgba CSS color
  */
diff --git a/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts b/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts
index 40e9b212..2182dec3 100644
--- a/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts
+++ b/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts
@@ -16,13 +16,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { DynamicShaderProps } from '../DynamicShader.js';
 import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
   type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**
diff --git a/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts b/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts
index c3fd5296..d71eea32 100644
--- a/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts
+++ b/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts
@@ -1,6 +1,5 @@
 import type { EffectMap } from '../../../../CoreShaderManager.js';
 import type { ExtractProps } from '../../../../CoreTextureManager.js';
-import type { WebGlContextWrapper } from '../../../../lib/WebGlContextWrapper.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,

From f3fa3af1966e4d96c5983ca8257a5dcdf2025db5 Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Mon, 4 Nov 2024 09:45:27 +0100
Subject: [PATCH 02/10] fix: renamed parseBorderColor to parseColorRgba

---
 src/core/renderers/canvas/CanvasCoreRenderer.ts      | 4 ++--
 src/core/renderers/canvas/internal/C2DShaderUtils.ts | 4 ++--
 src/core/renderers/canvas/internal/ColorUtils.ts     | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index affdd81c..fdeeaff8 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -33,7 +33,7 @@ import { CanvasCoreTexture } from './CanvasCoreTexture.js';
 import { getBorder, getRadius, strokeLine } from './internal/C2DShaderUtils.js';
 import {
   formatRgba,
-  parseBorderColor,
+  parseColorRgba,
   parseColor,
   type IParsedColor,
 } from './internal/ColorUtils.js';
@@ -185,7 +185,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
     if (border && border.width) {
       const pixelRatio = this.pixelRatio;
       const borderWidth = border.width * pixelRatio;
-      const borderColor = formatRgba(parseBorderColor(border.color ?? 0));
+      const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
 
       ctx.beginPath();
       ctx.lineWidth = borderWidth;
diff --git a/src/core/renderers/canvas/internal/C2DShaderUtils.ts b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
index 861cbca1..8ea71a6e 100644
--- a/src/core/renderers/canvas/internal/C2DShaderUtils.ts
+++ b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
@@ -25,7 +25,7 @@ import {
   ROUNDED_RECTANGLE_SHADER_TYPE,
   UnsupportedShader,
 } from '../shaders/UnsupportedShader.js';
-import { formatRgba, parseBorderColor } from './ColorUtils.js';
+import { formatRgba, parseColorRgba } from './ColorUtils.js';
 
 /**
  * Extract `RoundedRectangle` shader radius to apply as a clipping
@@ -128,7 +128,7 @@ export function strokeLine(
   }
   ctx.beginPath();
   ctx.lineWidth = lineWidth;
-  ctx.strokeStyle = formatRgba(parseBorderColor(color ?? 0));
+  ctx.strokeStyle = formatRgba(parseColorRgba(color ?? 0));
   ctx.moveTo(sx, sy);
   ctx.lineTo(ex, ey);
   ctx.stroke();
diff --git a/src/core/renderers/canvas/internal/ColorUtils.ts b/src/core/renderers/canvas/internal/ColorUtils.ts
index e795cade..541ccaee 100644
--- a/src/core/renderers/canvas/internal/ColorUtils.ts
+++ b/src/core/renderers/canvas/internal/ColorUtils.ts
@@ -50,7 +50,7 @@ export function parseColor(abgr: number): IParsedColor {
 /**
  * Extract color components
  */
-export function parseBorderColor(rgba: number): IParsedColor {
+export function parseColorRgba(rgba: number): IParsedColor {
   if (rgba === 0xffffffff) {
     return WHITE;
   }

From c490e9f0783ab2e7ba4484e01bc4ebb220baea0c Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Mon, 4 Nov 2024 12:34:33 +0100
Subject: [PATCH 03/10] fix: inner border

---
 .../renderers/canvas/CanvasCoreRenderer.ts    | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index fdeeaff8..4b9934c4 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -136,10 +136,14 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
     const radius = quad.shader ? getRadius(quad) : 0;
     const border = quad.shader ? getBorder(quad) : undefined;
-    const borderTop = quad.shader ? getBorder(quad, 'Top') : undefined;
-    const borderRight = quad.shader ? getBorder(quad, 'Right') : undefined;
-    const borderBottom = quad.shader ? getBorder(quad, 'Bottom') : undefined;
-    const borderLeft = quad.shader ? getBorder(quad, 'Left') : undefined;
+    const borderTop =
+      !border && quad.shader ? getBorder(quad, 'Top') : undefined;
+    const borderRight =
+      !border && quad.shader ? getBorder(quad, 'Right') : undefined;
+    const borderBottom =
+      !border && quad.shader ? getBorder(quad, 'Bottom') : undefined;
+    const borderLeft =
+      !border && quad.shader ? getBorder(quad, 'Left') : undefined;
 
     if (
       hasTransform ||
@@ -176,15 +180,9 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.translate(-tx, -ty);
     }
 
-    if (radius) {
-      const path = new Path2D();
-      path.roundRect(tx, ty, width, height, radius);
-      ctx.clip(path);
-    }
-
     if (border && border.width) {
-      const pixelRatio = this.pixelRatio;
-      const borderWidth = border.width * pixelRatio;
+      const borderWidth = border.width;
+      const borderInnerWidth = border.width / 2;
       const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
 
       ctx.beginPath();
@@ -192,10 +190,21 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.strokeStyle = borderColor;
       ctx.globalAlpha = alpha;
       if (radius) {
-        ctx.roundRect(tx, ty, width, height, radius);
+        ctx.roundRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+          radius,
+        );
         ctx.stroke();
       } else {
-        ctx.strokeRect(tx, ty, width, height);
+        ctx.strokeRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+        );
       }
       ctx.globalAlpha = 1;
     } else {
@@ -252,6 +261,12 @@ export class CanvasCoreRenderer extends CoreRenderer {
       }
     }
 
+    if (radius) {
+      const path = new Path2D();
+      path.roundRect(tx, ty, width, height, radius);
+      ctx.clip(path);
+    }
+
     if (ctxTexture) {
       const image = ctxTexture.getImage(color);
       ctx.globalAlpha = alpha;

From 02d0daca6d735766f7fc574ea1cb99412b862def Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Mon, 4 Nov 2024 13:13:58 +0100
Subject: [PATCH 04/10] fix: border

---
 src/core/renderers/canvas/CanvasCoreRenderer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index 4b9934c4..a9d0d3ce 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -137,13 +137,13 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const radius = quad.shader ? getRadius(quad) : 0;
     const border = quad.shader ? getBorder(quad) : undefined;
     const borderTop =
-      !border && quad.shader ? getBorder(quad, 'Top') : undefined;
+      !border?.width && quad.shader ? getBorder(quad, 'Top') : undefined;
     const borderRight =
-      !border && quad.shader ? getBorder(quad, 'Right') : undefined;
+      !border?.width && quad.shader ? getBorder(quad, 'Right') : undefined;
     const borderBottom =
-      !border && quad.shader ? getBorder(quad, 'Bottom') : undefined;
+      !border?.width && quad.shader ? getBorder(quad, 'Bottom') : undefined;
     const borderLeft =
-      !border && quad.shader ? getBorder(quad, 'Left') : undefined;
+      !border?.width && quad.shader ? getBorder(quad, 'Left') : undefined;
 
     if (
       hasTransform ||

From 7d3b6f340e7b32bbecdd8c72c79f06acacb85b6a Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Mon, 4 Nov 2024 18:29:48 +0100
Subject: [PATCH 05/10] fix: apply border after texture

---
 .../renderers/canvas/CanvasCoreRenderer.ts    | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index a9d0d3ce..751498a0 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -180,6 +180,56 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.translate(-tx, -ty);
     }
 
+    if (radius) {
+      const path = new Path2D();
+      path.roundRect(tx, ty, width, height, radius);
+      ctx.clip(path);
+    }
+
+    if (ctxTexture) {
+      const image = ctxTexture.getImage(color);
+      ctx.globalAlpha = alpha;
+      if (frame) {
+        ctx.drawImage(
+          image,
+          frame.x,
+          frame.y,
+          frame.width,
+          frame.height,
+          tx,
+          ty,
+          width,
+          height,
+        );
+      } else {
+        ctx.drawImage(image, tx, ty, width, height);
+      }
+      ctx.globalAlpha = 1;
+    } else if (hasGradient) {
+      let endX: number = tx;
+      let endY: number = ty;
+      let endColor: IParsedColor;
+      if (colorTl === colorTr) {
+        // vertical
+        endX = tx;
+        endY = ty + height;
+        endColor = parseColor(colorBr);
+      } else {
+        // horizontal
+        endX = tx + width;
+        endY = ty;
+        endColor = parseColor(colorTr);
+      }
+      const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
+      gradient.addColorStop(0, formatRgba(color));
+      gradient.addColorStop(1, formatRgba(endColor));
+      ctx.fillStyle = gradient;
+      ctx.fillRect(tx, ty, width, height);
+    } else {
+      ctx.fillStyle = formatRgba(color);
+      ctx.fillRect(tx, ty, width, height);
+    }
+
     if (border && border.width) {
       const borderWidth = border.width;
       const borderInnerWidth = border.width / 2;
@@ -261,56 +311,6 @@ export class CanvasCoreRenderer extends CoreRenderer {
       }
     }
 
-    if (radius) {
-      const path = new Path2D();
-      path.roundRect(tx, ty, width, height, radius);
-      ctx.clip(path);
-    }
-
-    if (ctxTexture) {
-      const image = ctxTexture.getImage(color);
-      ctx.globalAlpha = alpha;
-      if (frame) {
-        ctx.drawImage(
-          image,
-          frame.x,
-          frame.y,
-          frame.width,
-          frame.height,
-          tx,
-          ty,
-          width,
-          height,
-        );
-      } else {
-        ctx.drawImage(image, tx, ty, width, height);
-      }
-      ctx.globalAlpha = 1;
-    } else if (hasGradient) {
-      let endX: number = tx;
-      let endY: number = ty;
-      let endColor: IParsedColor;
-      if (colorTl === colorTr) {
-        // vertical
-        endX = tx;
-        endY = ty + height;
-        endColor = parseColor(colorBr);
-      } else {
-        // horizontal
-        endX = tx + width;
-        endY = ty;
-        endColor = parseColor(colorTr);
-      }
-      const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
-      gradient.addColorStop(0, formatRgba(color));
-      gradient.addColorStop(1, formatRgba(endColor));
-      ctx.fillStyle = gradient;
-      ctx.fillRect(tx, ty, width, height);
-    } else {
-      ctx.fillStyle = formatRgba(color);
-      ctx.fillRect(tx, ty, width, height);
-    }
-
     if (
       hasTransform ||
       hasClipping ||

From b23fc3adeb76301bc5aad4ad512afe7a4b97d78b Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Tue, 5 Nov 2024 11:34:52 +0100
Subject: [PATCH 06/10] refactor: removed border context save

---
 .../renderers/canvas/CanvasCoreRenderer.ts    | 44 ++++++-------------
 1 file changed, 13 insertions(+), 31 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index 751498a0..a4b22265 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -134,27 +134,11 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const hasTransform = ta !== 1;
     const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
     const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
-    const radius = quad.shader ? getRadius(quad) : 0;
-    const border = quad.shader ? getBorder(quad) : undefined;
-    const borderTop =
-      !border?.width && quad.shader ? getBorder(quad, 'Top') : undefined;
-    const borderRight =
-      !border?.width && quad.shader ? getBorder(quad, 'Right') : undefined;
-    const borderBottom =
-      !border?.width && quad.shader ? getBorder(quad, 'Bottom') : undefined;
-    const borderLeft =
-      !border?.width && quad.shader ? getBorder(quad, 'Left') : undefined;
-
-    if (
-      hasTransform ||
-      hasClipping ||
-      radius ||
-      border ||
-      borderTop ||
-      borderRight ||
-      borderBottom ||
-      borderLeft
-    ) {
+    const hasQuadShader = Boolean(quad.shader);
+    const radius = hasQuadShader ? getRadius(quad) : 0;
+    const border = hasQuadShader ? getBorder(quad) : undefined;
+
+    if (hasTransform || hasClipping || radius) {
       ctx.save();
     }
 
@@ -258,6 +242,13 @@ export class CanvasCoreRenderer extends CoreRenderer {
       }
       ctx.globalAlpha = 1;
     } else {
+      const borderTop = hasQuadShader ? getBorder(quad, 'Top') : undefined;
+      const borderRight = hasQuadShader ? getBorder(quad, 'Right') : undefined;
+      const borderBottom = hasQuadShader
+        ? getBorder(quad, 'Bottom')
+        : undefined;
+      const borderLeft = hasQuadShader ? getBorder(quad, 'Left') : undefined;
+
       if (borderTop) {
         strokeLine(
           ctx,
@@ -311,16 +302,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
       }
     }
 
-    if (
-      hasTransform ||
-      hasClipping ||
-      radius ||
-      border ||
-      borderTop ||
-      borderRight ||
-      borderBottom ||
-      borderLeft
-    ) {
+    if (hasTransform || hasClipping || radius) {
       ctx.restore();
     }
   }

From 19800a85dbb55df951808d04cbcb3e970d2f01eb Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Tue, 5 Nov 2024 12:59:40 +0100
Subject: [PATCH 07/10] refactor: cleaning up code

---
 .../renderers/canvas/internal/C2DShaderUtils.ts   | 15 +++++++--------
 src/core/renderers/webgl/WebGlCoreCtxTexture.ts   |  5 ++++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/core/renderers/canvas/internal/C2DShaderUtils.ts b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
index 8ea71a6e..7864438f 100644
--- a/src/core/renderers/canvas/internal/C2DShaderUtils.ts
+++ b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
@@ -27,6 +27,8 @@ import {
 } from '../shaders/UnsupportedShader.js';
 import { formatRgba, parseColorRgba } from './ColorUtils.js';
 
+type Direction = 'Top' | 'Right' | 'Bottom' | 'Left';
+
 /**
  * Extract `RoundedRectangle` shader radius to apply as a clipping
  */
@@ -56,7 +58,7 @@ export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
  * Extract `RoundedRectangle` shader radius to apply as a clipping */
 export function getBorder(
   quad: QuadOptions,
-  direction: '' | 'Top' | 'Right' | 'Bottom' | 'Left' = '',
+  direction: '' | Direction = '',
 ): BorderEffectProps | undefined {
   if (quad.shader instanceof UnsupportedShader) {
     const shType = quad.shader.shType;
@@ -65,15 +67,12 @@ export function getBorder(
         | EffectDescUnion[]
         | undefined;
 
-      if (effects) {
+      if (effects && effects.length) {
         const effect = effects.find((effect: EffectDescUnion) => {
-          return effect.type === `border${direction}` && effect?.props;
+          return effect.type === `border${direction}` && effect.props;
         });
 
-        return (
-          (effect && effect.type === `border${direction}` && effect.props) ||
-          undefined
-        );
+        return effect && effect.props;
       }
     }
   }
@@ -89,7 +88,7 @@ export function strokeLine(
   height: number,
   lineWidth = 0,
   color: number | undefined,
-  direction: 'Top' | 'Right' | 'Bottom' | 'Left',
+  direction: Direction,
 ) {
   if (!lineWidth) {
     return;
diff --git a/src/core/renderers/webgl/WebGlCoreCtxTexture.ts b/src/core/renderers/webgl/WebGlCoreCtxTexture.ts
index d3bf6ed9..085210cc 100644
--- a/src/core/renderers/webgl/WebGlCoreCtxTexture.ts
+++ b/src/core/renderers/webgl/WebGlCoreCtxTexture.ts
@@ -88,7 +88,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._nativeCtxTexture = this.createNativeCtxTexture();
     if (this._nativeCtxTexture === null) {
       this._state = 'failed';
-      this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
+      this.textureSource.setState(
+        'failed',
+        new Error('Could not create WebGL Texture'),
+      );
       console.error('Could not create WebGL Texture');
       return;
     }

From 8e8f9c2555fd26c2ecdda23ea898622db21cedbb Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Tue, 5 Nov 2024 13:03:11 +0100
Subject: [PATCH 08/10] refactor: added border.width check

---
 src/core/renderers/canvas/internal/C2DShaderUtils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core/renderers/canvas/internal/C2DShaderUtils.ts b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
index 7864438f..52fb7586 100644
--- a/src/core/renderers/canvas/internal/C2DShaderUtils.ts
+++ b/src/core/renderers/canvas/internal/C2DShaderUtils.ts
@@ -69,7 +69,11 @@ export function getBorder(
 
       if (effects && effects.length) {
         const effect = effects.find((effect: EffectDescUnion) => {
-          return effect.type === `border${direction}` && effect.props;
+          return (
+            effect.type === `border${direction}` &&
+            effect.props &&
+            effect.props.width
+          );
         });
 
         return effect && effect.props;

From ce2be9ebb88a408624c6e508c7b03b9338ce4601 Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Wed, 6 Nov 2024 09:58:43 +0100
Subject: [PATCH 09/10] fix: hasQuadShader check once

---
 src/core/renderers/canvas/shaders/UnsupportedShader.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/renderers/canvas/shaders/UnsupportedShader.ts b/src/core/renderers/canvas/shaders/UnsupportedShader.ts
index 11636cd4..2f60abf6 100644
--- a/src/core/renderers/canvas/shaders/UnsupportedShader.ts
+++ b/src/core/renderers/canvas/shaders/UnsupportedShader.ts
@@ -27,9 +27,9 @@ export class UnsupportedShader extends CoreShader {
   constructor(shType: string) {
     super();
     this.shType = shType;
-    if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
-      console.warn('Unsupported shader:', shType);
-    }
+    // if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+    //   console.warn('Unsupported shader:', shType);
+    // }
   }
 
   bindRenderOp(): void {

From 6d92d20a500a1c4afd36df406c568955fe4f9c75 Mon Sep 17 00:00:00 2001
From: Mirko Pecora <mi.pecora@reply.it>
Date: Wed, 6 Nov 2024 10:03:02 +0100
Subject: [PATCH 10/10] fix: hasQuadShader check once

---
 src/core/renderers/canvas/CanvasCoreRenderer.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/core/renderers/canvas/CanvasCoreRenderer.ts b/src/core/renderers/canvas/CanvasCoreRenderer.ts
index a4b22265..1fae5447 100644
--- a/src/core/renderers/canvas/CanvasCoreRenderer.ts
+++ b/src/core/renderers/canvas/CanvasCoreRenderer.ts
@@ -241,13 +241,11 @@ export class CanvasCoreRenderer extends CoreRenderer {
         );
       }
       ctx.globalAlpha = 1;
-    } else {
-      const borderTop = hasQuadShader ? getBorder(quad, 'Top') : undefined;
-      const borderRight = hasQuadShader ? getBorder(quad, 'Right') : undefined;
-      const borderBottom = hasQuadShader
-        ? getBorder(quad, 'Bottom')
-        : undefined;
-      const borderLeft = hasQuadShader ? getBorder(quad, 'Left') : undefined;
+    } else if (hasQuadShader) {
+      const borderTop = getBorder(quad, 'Top');
+      const borderRight = getBorder(quad, 'Right');
+      const borderBottom = getBorder(quad, 'Bottom');
+      const borderLeft = getBorder(quad, 'Left');
 
       if (borderTop) {
         strokeLine(