We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfSignature Error When open inside SfModal

Hi all,

I'm trying to create a signature from inside a Modal, when I open the modal and click on the Signaure to Draw it, I got this error when I open the Console on the Browser Developer tools.

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://cdn.syncfusion.com/blazor/20.1.59/syncfusion-blazor.min.js:23:1028981)

    at t.mouseUpHandler (https://cdn.syncfusion.com/blazor/20.1.59/syncfusion-blazor.min.js:23:1023061)

This is a same issue that was reported on this Thread:  Blazor signature Uncaught DOMException: Failed to execute drawImage on CanvasRenderingContext2D | Blazor Forums | Syncfusion

I try the Zip file that you provided and a single signature works, I modify that solution and add my issue so you can see it.

I will be deleting the mp4 so the zip file will be smaller.

Thank you for all your help



Attachment: BlazorApp1SignatureModalDemo_dd0dc306.zip

3 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team December 13, 2022 10:11 AM UTC

Hi Luis,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet. The signature pad render depends on parent div element height and width. Initially, the dialog component height and width were 0. So, only signature pad render with 0 height and width. To resolve this issue, render the signature pad in Opened event of the dialog component.

<SfDialog @bind-Visible=IsPopupVisible





              <DialogEvents Opened="@OnOpenHandler" Closed="@OnCloseHandler"></DialogEvents>



                                           <span class="sub-title">Signature</span>

                                           @*<span class="sub-title">@Localizer[TextItem.Signature.ToString()]</span>*@



                                              @if (isOpen) {

                                                             <SignatureComponent IsSignature=@true IsNext="@IsNext" />






public void OnOpenHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)


        isOpen = true;



              public void OnCloseHandler(Syncfusion.Blazor.Popups.CloseEventArgs args)


        isOpen = false;


Could you please check with attached sample and get back to us, if you need any further assistance on this. 


YuvanShankar A

Attachment: BlazorApp1SignatureModalDemo_6580abbf.zip

Marked as answer

LC Luis Campuzano replied to YuvanShankar Arunagiri December 13, 2022 01:21 PM UTC

Hi  YuvanShankar,

Thank you for your response, your demo and sample worked and I'm able now to open it. Also, I found out that if you add height and width as HtmlAttribute Tag, it works as well, just my small input on the topic.

Thank you again and the whole team for making these components awesome.



YA YuvanShankar Arunagiri Syncfusion Team December 14, 2022 06:34 AM UTC

Thanks for your valuable feedback, Luis.

Your suggested solution is also correct. We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any other assistance.

Live Chat Icon For mobile
Up arrow icon