JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Canvas</h1>
<p>Specs:</p>

<section id="specs">
  <canvas id="specs-canvas" width="1000" height="400"></canvas>
</section>

JavaScript

$(document).ready(function(){
    
    var canvas = document.getElementById("specs-canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 100, 100);
    
    var canvasData = canvas.toDataURL();
    $('#specs').append('<img id="specs-img" src="'+canvasData+'" style="display: none;">');
    
    $('#specs').mousedown(function(){
        $('#specs-img').show();
        $('#specs-canvas').hide();
    });
    
    $('#specs').mouseup(function(){
        $('#specs-img').hide();
        $('#specs-canvas').show();        
    });

});