update

_LSP.js

@@ -1013,19 +1013,20 @@ class BaseWidget {
       let canvas = document.createElement("canvas");
       let sourceImg = document.getElementById("sourceImg");
       let silhouetteImg = document.getElementById("silhouetteImg");
-      var size = sourceImg.width > sourceImg.height ? sourceImg.width : sourceImg.height;
+      var diameter = sourceImg.width < sourceImg.height ? sourceImg.width : sourceImg.height;
       let ctx = canvas.getContext('2d');
-      canvas.width = sourceImg.width;
-      canvas.height = sourceImg.height;
+      canvas.width = diameter;
+      canvas.height = diameter;
       ctx.save();
-      ctx.arc(sourceImg.width / 2, sourceImg.height / 2, size / 2, 0, 2 * Math.PI);
+      ctx.beginPath();
+      ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, 2 * Math.PI);
       ctx.clip();
       ctx.drawImage(sourceImg, 0, 0);
       ctx.restore();
-      let imgData = ctx.getImageData(0, 0, size, size);
-      ctx.putImageData(imgData,0,0);
+      let imgData = ctx.getImageData(0, 0, diameter, diameter);
+      ctx.putImageData(imgData, 0, 0);
       silhouetteImg.src = canvas.toDataURL();
-      output=canvas.toDataURL();
+      output = canvas.toDataURL();
     `
     const wv = new WebView();
     await wv.loadHTML(html);

test.js

@@ -7,21 +7,23 @@ const html = `
     <canvas id="mainCanvas" />
     `
 const js = `
-    var canvas = document.createElement("canvas");
-    var sourceImg = document.getElementById("sourceImg");
-    var silhouetteImg = document.getElementById("silhouetteImg");
-    var ctx = canvas.getContext('2d');
-    canvas.width = sourceImg.width;
-    canvas.height = sourceImg.height;
+    let canvas = document.createElement("canvas");
+    let sourceImg = document.getElementById("sourceImg");
+    let silhouetteImg = document.getElementById("silhouetteImg");
+    var diameter = sourceImg.width < sourceImg.height ? sourceImg.width : sourceImg.height;
+    let ctx = canvas.getContext('2d');
+    canvas.width = diameter;
+    canvas.height = diameter;
     ctx.save();
-    ctx.arc(sourceImg.width / 2, sourceImg.height / 2, sourceImg.height / 2, 0, 2 * Math.PI);
+    ctx.beginPath();
+    ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, 2 * Math.PI);
     ctx.clip();
     ctx.drawImage(sourceImg, 0, 0);
     ctx.restore();
-    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    ctx.putImageData(imgData,0,0);
+    let imgData = ctx.getImageData(0, 0, diameter, diameter);
+    ctx.putImageData(imgData, 0, 0);
     silhouetteImg.src = canvas.toDataURL();
-    output=canvas.toDataURL();
+    output = canvas.toDataURL();
     `
 
 let wv = new WebView();