JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
    </head>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<a href="#" onclick="downloadCanvasImage(event)">Download</a>

</body>

<script>
let canvas

function createCanvasByFabric () {
	canvas = new fabric.Canvas("myCanvas")
}

function appendImage () {
	fabric.Image.fromURL('https://www.google.com.tw/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', function(myImg) {
   let scale = canvas.width / myImg.width;
   
   var img1 = myImg.set({ 
     left: 0, 
     top: 0 ,
     scaleX: scale,
		 scaleY: scale,
   });
   canvas.add(img1);
  });
}


function drawCircle () {
	let ctx = canvas.getContext("2d");
  
  let centerX = canvas.width / 2;
  let centerY = canvas.height / 2;

  let circleRadius = canvas.width / 2;
	
  ctx.beginPath();
	ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);
  ctx.stroke();
  
  ctx.clip();
  ctx.save();
}

function drawText(text) {
  canvas.add(new fabric.Text(text, { 
    fontFamily: '微軟正黑體', 
    left: 100, 
    top: 100 
  }));
}

function downloadCanvasImage (e) {
	e.preventDefault()

	let canvas = document.getElementById('myCanvas')
  
  canvas.toBlob(blob => {
  	let url = URL.createObjectURL(blob)
    
    let link = document.createElement('a')
    link.innerText = 'Download'
    link.href = url
    link.download = 'output.png'

    document.body.appendChild(link)
    link.click()
    link.parentNode.removeChild(link)
  })
}

createCanvasByFabric()
appendImage()
drawCircle()
drawText('我是誰')

</script> 

</html>