JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.js"></script>

<div id="lemu">
    
    <canvas id='mycanvas' width='400' height='200' style='border:1px solid #000000;'></canvas>
    <img src='' style="border:1px solid">
</div>

<div class="japu">click to copy the canvas </div>

<select><option value="1x1">36x24</option> <option value="36x48">36x24</option>  <option value="36x48">36x96</option> </select>

JavaScript

$=jQuery;
  
  $(document).ready(function () {
        jQuery('.japu').click(function(){
         var canstring = canvas.toDataURL("image/png", 1.0);
         jQuery('img').attr('src',canstring);   

          });


var canvas = new fabric.Canvas('mycanvas');
 fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {

    var oImg = img.set({ left: 150, top: 0}).scale(0.4);
     oImg.crossOrigin ='Anonymous';
    canvas.add(oImg);
  }, { crossOrigin: 'Anonymous' });



jQuery('select').change(function(){

var valu = jQuery(this).val();
var candata = valu.split('x');


if(candata[0]==1){

    jQuery('canvas').width(200);

}  
else{

jQuery('canvas').width(100);
jQuery('.canvas-container').width(300);

}



});

     
});