JSFiddle - React, Tailwind, and code Playground

HTML

<div class='circle'>
</div>

CSS

.circle {
    height: auto;
    width: auto;
}

JavaScript

var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();
var url = c.toDataURL();
var img = document.createElement("img");
img.setAttribute("src",url);
$(".circle").append(img);


$('.circle').draggable({
    
});