My first post here, so forgive any etiquette slips.

I am creating a page whereby the user can customize a card...that functionality is not a problem. But I need to export an image of the card, and cannot make that happen. I have tried the code from the html2canvas site, among many other versions, trying even to render the whole document, from this page and others. But I get nothing, save for a few errors I don't understand.

Here's the page: https://interrobangtype.co/resources/business-card-maker/ Upon clicking the submit button, I see this error:

Uncaught (in promise) DOMException: CanvasRenderingContext2D.createPattern: Passed-in canvas has height 0

My code specific to this function is here:

<canvas class='hidden card' style='width: 3.5in; height: 2in;'></canvas>
<button onclick="Submit();" class='download-card button' id='download-card' >Submit</button>
                        
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('canvas.card').removeClass('hidden');
}
});
}
</script>

Any insight? I tried it by letting the plugin append the canvas as well.