JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="100" height="100"></canvas><br />
<img id='image' src='' /><br />
<input type="submit" id="submit" value="Копировать из canvas в img" /><br />
<form id='form' method='post'>
<input type='text' id='text' value='Url картинки' />
</form>

CSS

canvas,img{border: 1px solid #000;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 80, 80);

$("submit").onclick = function() {
    var canvasImageData = canvas.toDataURL("image/jpg");
    var image = document.getElementById("image");
    image.src = canvasImageData;
    var text = document.getElementById("text");
    text.value = canvasImageData;
}