JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gist.github.com/raw/589185/09ca0dea770aff745ab9f429920f132dba0230c3/mcl-min.js"></script>
<canvas id="canvas" width=500 height=500></canvas>

CSS

canvas 
{ 
    background-color : blue;
    text-align : center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
       left:auto;
       top:auto;
    width: 300px;
    height:300px;
    overflow: hidden;
    
    -webkit-border-radius: 16px;
    -webkit-box-shadow: 0px 6px 7px #0a0505;
    -webkit-transition-property: opacity;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
}

JavaScript

CANVAS.init({
    canvasElement: 'canvas', enableMouse: true
});

var layer = CANVAS.layers.add(new Layer({
    id: 'myLayer'
}));

var cssScale = [canvas.getSize().x / canvas.get('width'),
                canvas.getSize().y / canvas.get('height')];

layer.add(new CanvasItem({
    id: 'item', x: 300, y: 200, w: 50, h: 50, rotation: 0, scale: 1, fillStyle: '#000', interactive: true, offset: [0, 0], events: {
        onDraw: function(ctx) {
            var w = this.w * this.scale;
            var h = this.h * this.scale;
            var x = this.x - w * .5;
            var y = this.y - h * .5;

            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rotation * Math.PI / 180);

            ctx.fillStyle = this.fillStyle;
            ctx.fillRect(w * -0.5, h * -0.5, w, h);
            ctx.restore();

            this.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]);
        },

        onDblclick: function(x, y) {
            this.fillStyle = '#000';
            new Cmorph(this, {duration: 1000, transition: 'sine:in:out'}).morph({
                scale: 1, x: 300, y: 200, rotation: 0
            });
        },

        onMousedown: function(x, y) {
            CANVAS.setDrag(this);
            this.offset = [x - this.dims[0], y - this.dims[1]];
            this.dragging = true;
        },

        onMousemove: function(x, y) {
            if (this.dragging) {
                this.rotation = this.rotation >= 360 ? 0 : this.rotation + 4;
                var w = this.w * this.scale;
                var h = this.h * this.scale;

                this.x = (x - this.offset[0]) / cssScale[0] + w * .5;
                this.y = (y - this.offset[1]) / cssScale[1] + h * .5;
            }
        },

        onMouseup: function() {
            CANVAS.clearDrag();
            this.dragging = false;
        },

        onMouseover: function() {
            this.fillStyle = '#999';
        },

        onMouseout: function()...