fix: added support to border and radius for canvas2d

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

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

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
  */

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';
 
 /**

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,