JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canv" height="200" width="200" ></canvas>
<form method="post" id='theform' action="mypage.aspx" >
    <input type="button" id='thebutton' value="submit" />
    <input type="hidden" name="canvImg" id="canvImg" />
</form>

CSS

#canv{
    border:solid 1px black;
}

JavaScript

function draw(){
    var ctx = document.getElementById('canv').getContext('2d');
    
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(10,10,150,75);
}


function submitImage(){
    var url = document.getElementById('canv').toDataURL();
    //this will show you the image data
    alert(url);
    //put it in the hidden imput and submit the form.
    document.getElementById('canvImg').value = url;
    
    //not actually submitting here since it will just cause problems with jsfiddle.
    //document.getElementById('theform').submit();
}


draw();

document.getElementById('thebutton').onclick=submitImage;