Merge pull request #46 from MarvinKlein1508/fix-background-color

Fix background color

Author: MarvinKlein1508

BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor

@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo @rendermode="InteractiveServer" />

BlazorServerDemo/Pages/BGColor.razor

@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo />

BlazorWebAssemblyDemo/Pages/BGColor.razor

@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo />

Demos.Core/NavMenu.razor

@@ -35,6 +35,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="BGColorDemo" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> BG Color
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="BGImageDemo" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> BG Image

Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor

@@ -0,0 +1,52 @@
+@inject NavigationManager navigationManager
+@inject SignatureInMemoryService memoryService
+
+<h3>BackgroundColorDemo</h3>
+
+<SignaturePad @bind-Value="Input.Signature" Options="_options" style="width: 100%;" />
+
+
+@if (Input.Signature.Any())
+{
+    <h2>Signature</h2>
+    <img src="@Input.SignatureAsBase64" />
+    <button type="button" class="btn btn-primary" @onclick="SaveSignature">Save signature</button>
+    <button type="button" class="btn btn-primary" @onclick="OpenSignature">Open signature</button>
+}
+
+@if (memoryService.Signature.Any())
+{
+    <button type="button" class="btn btn-primary ms-1" @onclick="ReadSignature">Read signature</button>
+}
+
+
+
+@code {
+    public MyInput Input { get; set; } = new();
+
+    private SignaturePadOptions _options = new SignaturePadOptions
+        {
+            LineCap = LineCap.Round,
+            LineJoin = LineJoin.Round,
+            LineWidth = 10,
+            BackgroundColor = "red",
+            StrokeStyle = System.Drawing.Color.White
+        };
+
+
+    private void SaveSignature()
+    {
+        memoryService.Signature = Input.Signature;
+    }
+
+    private void OpenSignature()
+    {
+        navigationManager.NavigateTo(Input.SignatureAsBase64);
+    }
+
+    private void ReadSignature()
+    {
+        Input.Signature = memoryService.Signature;
+        StateHasChanged();
+    }
+}

SignaturePad/SignaturePad.csproj

@@ -4,7 +4,7 @@
 		<TargetFramework>net8.0</TargetFramework>
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
-		<Version>8.1.4</Version>
+		<Version>8.1.5</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

@@ -75,7 +75,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.4");
+                _jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.5");
                 await Setup();
                 await Update();
                 await UpdateImage();

SignaturePad/wwwroot/sigpad.interop.js

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

SignaturePad/wwwroot/sigpad.min.js

@@ -84,6 +84,8 @@ export default class Sigpad {
 
         this._element.width = this._element.clientWidth;
         this._element.height = this._element.clientHeight;
+
+        this.render(true);
     }
 
     destroy() {
@@ -143,10 +145,7 @@ export default class Sigpad {
     }
 
     setImage(image) {
-        if (this._config.backgroundColor != null && this._config.backgroundColor != "") {
-            ctx.fillStyle = this._config.backgroundColor;
-            ctx.fillRect(0, 0, this._element.width, this._element.height);
-        }
+        
 
         if (this._config.backgroundImage != null && this._config.backgroundImage != "") {
             this.setBackgroundImage(this._config.backgroundImage);
@@ -285,6 +284,12 @@ export default class Sigpad {
 
             ctx.clearRect(0, 0, this._element.width, this._element.height);
 
+            if (this._config.backgroundColor != null && this._config.backgroundColor != "") {
+                ctx.fillStyle = this._config.backgroundColor;
+                ctx.fillRect(0, 0, this._element.width, this._element.height);
+            }
+
+
             if (this._bgImg != undefined && this._bgImg.complete) {
                 ctx.drawImage(this._bgImg, 0, 0,
                     this._bgImg.width * window.devicePixelRatio,