Blazor signature Uncaught DOMException: Failed to execute drawImage on CanvasRenderingContext2D

[Frederick]

Hi

I am have the following in my div:

<SfSignature StrokeColor="@strokeColor" @ref="signature" BackgroundColor="@signaturePadBackground"

                                                 MaxStrokeWidth="4" MinStrokeWidth="1"

                                                 style="width: 750px; height: 300px;"></SfSignature>

However,

Any time I make attempt to draw I get the following error  at syncfusion-blazor.min.js:21:1018579:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    at t.updateSnapCollection (https://localhost:5025/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:21:1024499)

    at t.mouseUpHandler (https://localhost:5025/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:21:1018579)

[YuvanShankar Arunagiri]

Hi Frederick,

We are unable to replicate the issue in our end. For your reference, we prepared the video demonstration and sample, please find the below attachment.

If you are still facing issue, please share the below details.

• Share the issue reproducible sample or replicate the issue in our sample.

• Share the video demonstration of issue replicable.

Please provide the above requested information, based on that we will check and provide you a better solution quickly.

Regards,

YuvanShankar A

Attachment: BlazorApp1net6_a4527d15.zip

[Luis Campuzano]

Hi Frederick,

This maybe a little late to your question but I'm adding some inputs, I got the same issue, and they told me that " The signature pad render depends on parent div element height and width." So I recommend that either add some width and height to your parent div, or add some HtmlAttribute inside the SfSignature component like this:

<SfSignature @ref="SignatureRef"

 HtmlAttributes="@HtmlAttribute"

 Disabled="@SignatureDisable"

 StrokeColor="@StrokeColor"

 MaxStrokeWidth="@MaxStrokeWidth"

 MinStrokeWidth="0.5"

 Velocity="0.7"

 Changed="SignatureChanged">

</SfSignature>

@code{

//Previous code

Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

{

   //{ "style", "width: 400px; height: 100px;" },

{"height", "250px;" },

{"width", "1020px;" }

};

}

//Previous code