Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0

[binoyav83]

Describe the bug
Im trying to show the painterro editor with an id using the code Painterro({id: "painterro"}).show();
And this id is inside a modal dialog and I'm showing the modal only on button click.

<div class="modal modal-xl fade" id="whiteboardModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div id="painterroholder">
                    <div id="painterro"></div>
                </div>
                <button type="button" class="btn btn-danger ml-3" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

and my CSS
`
#painterroholder {
display: flex;
}

#painterro {
position: relative;
width: 300px;
height: 400px;
}
`

Im getting the error "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0" on click of button click. The editor is working fine with the code Painterro().show() but not with the id.

Please help

Painterro version
latest

[binoyav83]

<div class="modal modal-xl fade " id="whiteboardModal" tabindex="-1" role="dialog">
The problem is with the fade class. Its working now