JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alexismangin.com/public/cbc/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
    var Stroke = Base.extend({
        initialize: function() {
            this.path = new Path();
            this.path.strokeCap = 'round';
            this.path.strokeColor = '#000000';
            this.path.strokeWidth = 5;
        },
        addPoint: function(point) {
            this.path.add(point);
        }
    });

    var stroke = new Stroke();

    function onMouseDrag(event) {
        stroke.addPoint(event.point);
    }

    function onMouseUp() {
        stroke = new Stroke();
    }
</script>
<div id="canvas_container">
    <canvas id="canvas" width="690" height="515"></canvas>
</div>

CSS

#canvas_container {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 15px;
    height: 515px;
    margin: 20px 20px;
    overflow: hidden;
    width: 690px;
}

#canvas {
    height: 515px;
    width: 690px;
}