fix artifacts on slower devices

MarvinKlein1508 · Jul 2, 2024 · 2c23084 · 2c23084
1 parent 45c7959
commit 2c23084
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js
@@ -8,7 +8,8 @@
 
 const sigpadMap = new Map();
 
-function drawPoints(ctx, points) {
+// finished param: only draw last point after points wont differ from exec to exec
+function drawPoints(ctx, points, finished) {
     // draw a point instead
     if (points.length == 1) {
         var b = points[0];
@@ -17,7 +18,7 @@ function drawPoints(ctx, points) {
     }
 
     // draw line for just two points
-    if (points.length == 2) {
+    if (points.length == 2 && finished) {
         ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
         ctx.lineTo(points[1].x, points[1].y);
         ctx.stroke();
@@ -32,7 +33,7 @@ function drawPoints(ctx, points) {
             d = (points[i].y + points[i + 1].y) / 2;
         ctx.quadraticCurveTo(points[i].x, points[i].y, c, d);
     }
-    if (i < points.length - 1)
+    if (i < points.length - 1 && finished)
         ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
     //ctx.closePath();
     ctx.stroke();
@@ -231,7 +232,7 @@ export default class Sigpad {
             return;
         }
 
-        data.render();
+        data.render(true);
         data._drawing = false;
 
         const event = new CustomEvent('sigpad.finish', { detail: data.getImage() });
@@ -266,15 +267,16 @@ export default class Sigpad {
         }
     }
 
-    render() {
+    //finished: signal to renderer that all individual mouse position arrays are complete
+    render(finished) {
         if (this._element.width != this._element.clientWidth) {
             this._element.width = this._element.clientWidth;
         }
 
         if (this._drawing) {
             var ctx = this._element.getContext("2d");
             this._applyOptions(ctx);
-            this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke));
+            this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke, finished));
         }
     }
 }
@@ -293,7 +295,7 @@ const requestAnimFrame = (function (callback) {
 (function renderSignatures() {
     requestAnimFrame(renderSignatures);
     Sigpad.getAllInstances().forEach((sigpad, index) => {
-        sigpad.render();
+        sigpad.render(false);
     });
 
 })();