JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
        var path = null;
        var circles = [];
        function onMouseDrag(event) {
            // The radius is the distance between the position
            // where the user clicked and the current position
            // of the mouse.
            path = new Path.Circle({
                center: event.downPoint,
                radius: (event.downPoint - event.point).length,
                fillColor: null,
                strokeColor: 'black',
                strokeWidth: 10
            });

            // Remove this path on the next drag event:
            path.removeOnDrag();
            
        };
    
        function onMouseUp(event) {
            circles.push(path);
        };
</script><canvas id="canvas"></canvas>

CSS

canvas {
    width: 400px;
    height:400px;
    border: 1px solid black;
}