@clypra/engine 1.1.2 → 1.2.0

package/dist/index.js

@@ -817,6 +817,17 @@ function restoreLetterSpacing(ctx, saved) {
 function getCanvas2DContext2(canvas) {
   return canvas.getContext("2d");
 }
+function ctxSupportsFilter(ctx) {
+  try {
+    const prev = ctx.filter;
+    ctx.filter = "blur(4px)";
+    const ok = typeof ctx.filter === "string" && ctx.filter.includes("blur");
+    ctx.filter = prev;
+    return ok;
+  } catch {
+    return false;
+  }
+}
 function renderTextEffectCore(ctx, cfg) {
   if (cfg.customRenderer === "InkBrushEngine") {
     const engine = new InkBrushEngine(cfg);
@@ -1126,19 +1137,31 @@ function renderTextEffectCore(ctx, cfg) {
       const vpy = cHeight / 2 + (bevelVanishingPointY !== void 0 ? bevelVanishingPointY : 80) / 100 * (cHeight / 2);
       const fl = Math.max(100, bevelFocalLength !== void 0 ? bevelFocalLength : 400);
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const scale = fl / (fl + i);
+        if (ctxSupportsFilter(ctx)) {
           ctx.save();
-          ctx.translate(vpx, vpy);
-          ctx.scale(scale, scale);
-          ctx.translate(-vpx, -vpy);
-          renderLines("fill", blurColor);
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderLines("fill", blurColor);
+            ctx.restore();
+          }
           ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, 0, 0, 100);
+            ctx.restore();
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1185,14 +1208,21 @@ function renderTextEffectCore(ctx, cfg) {
         return { dx: i, dy: i };
       };
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const { dx, dy } = getDirOffset(i);
-          renderLines("fill", blurColor, dx, dy);
+        if (ctxSupportsFilter(ctx)) {
+          ctx.save();
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderLines("fill", blurColor, dx, dy);
+          }
+          ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, dx, dy, 100);
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1246,24 +1276,51 @@ function renderTextEffectCore(ctx, cfg) {
       customStrokeStyle = grad;
     }
     const drawStrokeLayer = (color, width, blurAmount, opacity, position) => {
-      ctx.save();
-      ctx.globalAlpha = opacity / 100;
-      ctx.strokeStyle = color;
-      if (blurAmount > 0) {
+      if (blurAmount > 0 && ctxSupportsFilter(ctx)) {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
         ctx.filter = `blur(${blurAmount}px)`;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
+      } else if (blurAmount > 0) {
+        const colorStr = typeof color === "string" ? color : strokeColor;
+        const spread = position === "center" ? width / 2 : width;
+        if (position === "inside") {
+          ctx.save();
+          ctx.globalCompositeOperation = "source-atop";
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+          ctx.restore();
+        } else {
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+        }
+      } else {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
       }
-      if (position === "outside") {
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      } else if (position === "center") {
-        ctx.lineWidth = width;
-        renderLines("stroke");
-      } else if (position === "inside") {
-        ctx.globalCompositeOperation = "source-atop";
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      }
-      ctx.restore();
     };
     if (sType === "double") {
       const outerWidth = strokeWidth + sWidthSecondary;