modern-canvas 0.8.6 → 0.8.8

package/dist/index.cjs

@@ -5131,20 +5131,17 @@ class GradientTexture extends Texture2D {
     const h = height;
     const cx = w / 2;
     const cy = h / 2;
-    const canAng = angle * Math.PI / 180;
-    const hypt = cy / Math.cos(canAng);
-    const fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
-    const diag = Math.sin(canAng) * fromTopRight;
-    const len = hypt + diag;
-    const x0 = cx + Math.cos(-Math.PI / 2 + canAng) * len;
-    const y0 = cy + Math.sin(-Math.PI / 2 + canAng) * len;
-    const x1 = cx + Math.cos(Math.PI / 2 + canAng) * len;
-    const y1 = cy + Math.sin(Math.PI / 2 + canAng) * len;
-    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    stops.forEach((stop) => {
-      gradient.addColorStop(stop.offset, stop.color);
-    });
-    ctx.fillStyle = gradient;
+    const A = (angle + 90) * Math.PI / 180;
+    const dx = Math.sin(A);
+    const dy = -Math.cos(A);
+    const L = Math.abs(w * Math.sin(A)) + Math.abs(h * Math.cos(A));
+    const x0 = cx - dx * (L / 2);
+    const y0 = cy - dy * (L / 2);
+    const x1 = cx + dx * (L / 2);
+    const y1 = cy + dy * (L / 2);
+    const g = ctx.createLinearGradient(x0, y0, x1, y1);
+    for (const s of stops) g.addColorStop(s.offset, s.color);
+    ctx.fillStyle = g;
     ctx.fillRect(0, 0, w, h);
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     return {
@@ -14431,21 +14428,31 @@ class Engine extends SceneTree {
     const canvas1 = document.createElement("canvas");
     canvas1.width = imageData.width;
     canvas1.height = imageData.height;
-    canvas1.getContext("2d")?.putImageData(imageData, 0, 0);
+    const ctx1 = canvas1.getContext("2d");
+    if (ctx1) {
+      ctx1.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+      ctx1.putImageData(imageData, 0, 0);
+    }
     const canvas2 = document.createElement("canvas");
     canvas2.width = this.width;
     canvas2.height = this.height;
-    canvas2.getContext("2d")?.drawImage(
-      canvas1,
-      0,
-      0,
-      canvas1.width,
-      canvas1.height,
-      0,
-      0,
-      canvas2.width,
-      canvas2.height
-    );
+    const ctx2 = canvas2.getContext("2d");
+    if (ctx2) {
+      ctx2.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+      ctx2.drawImage(
+        canvas1,
+        0,
+        0,
+        canvas1.width,
+        canvas1.height,
+        0,
+        0,
+        canvas2.width,
+        canvas2.height
+      );
+    }
     return canvas2;
   }
 }