Merge pull request #38 from CodeGod911/bugfix/ColorOfDots

fill disregards strokestyle

Author: MarvinKlein1508

SignaturePad/SignaturePad.csproj

@@ -4,7 +4,7 @@
 		<TargetFramework>net8.0</TargetFramework>
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
-		<Version>8.1.2</Version>
+		<Version>8.1.3</Version>
 		<Description>A simple to use blazor component to draw a signature.</Description>
 		<Copyright>2023</Copyright>
 		<RepositoryUrl>https://github.com/MarvinKlein1508/SignaturePad</RepositoryUrl>

SignaturePad/SignaturePad.razor.cs

@@ -72,7 +72,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
-                _jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.2");
+                _jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.3");
                 await Setup();
                 await Update();
                 await UpdateImage();

SignaturePad/wwwroot/sigpad.interop.js

@@ -1,4 +1,4 @@
-import Sigpad from "./sigpad.min.js?ver=8.1.2"
+import Sigpad from "./sigpad.min.js?ver=8.1.3"
 var dotNetHelper;
 
 export function setup(id, reference, options, image) {

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();
@@ -98,6 +99,7 @@ export default class Sigpad {
             ctx = this._element.getContext("2d");
         }
         ctx.strokeStyle = this._config.strokeStyle;
+        ctx.fillStyle = this._config.strokeStyle;
         ctx.lineWidth = this._config.lineWidth;
         ctx.lineCap = this._config.lineCap;
         ctx.lineJoin = this._config.lineJoin;
@@ -230,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() });
@@ -265,14 +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));
         }
     }
 }
@@ -291,7 +295,7 @@ const requestAnimFrame = (function (callback) {
 (function renderSignatures() {
     requestAnimFrame(renderSignatures);
     Sigpad.getAllInstances().forEach((sigpad, index) => {
-        sigpad.render();
+        sigpad.render(false);
     });
 
 })();