SfSignature Error When open inside SfModal

[Luis Campuzano]

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

Sincerely, 

Luis

Attachment: BlazorApp1SignatureModalDemo_dd0dc306.zip

[YuvanShankar Arunagiri]

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

                               IsModal=true

                               ShowCloseIcon=true

                               CloseOnEscape=true

                               CssClass="signature-modal">

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

              <DialogTemplates>

                             <Header>

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

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

                             </Header>

                             <Content>

                                              @if (isOpen) {

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

                                              }

                             </Content>

              </DialogTemplates>

 

‘’’’’’’’’’’’’’

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. 

Regards,

YuvanShankar A

Attachment: BlazorApp1SignatureModalDemo_6580abbf.zip

[Luis Campuzano]

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.

Regards,

Luis

[YuvanShankar Arunagiri]

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.