JSFiddle - React, Tailwind, and code Playground

by bordeux

HTML

<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script src="https://cdn.rawgit.com/kriskowal/q/v1/q.js"></script>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<canvas></canvas>

CSS

html, body, canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    html {
        background: #282828;
    }

JavaScript

var example = function(){
    this.constructor.apply(this, arguments);
};


example.prototype.constructor  = function(){
    this.$canvas = $("canvas");
    this.container = {};
    this.objects = {};
    this.resizeEvents = [];
    this.prepareCanvas();
    this.refreshSize();
    this.bindEvents();
};



example.prototype.bindEvents = function() {
    var self = this;
    $(window).resize(function(){
        self.refreshSize();
    });
};
example.prototype.refreshSize = function() {
    this.stage.canvas.width = window.innerWidth;
    this.stage.canvas.height = window.innerHeight;

    this.resizeEvents.forEach(function(item){
        item();
    });
};



example.prototype.getObject = function(name) {
    return this.objects[name];
};


example.prototype.setObject = function(name, obj) {
    this.objects[name] = obj;
    return obj;
};


example.prototype.addResizeEvent = function(foo) {
    this.resizeEvents.push(foo);
    return this;
};


example.prototype.initCursor = function() {
    var self = this;
    var size = 50;

    /**
     * Circle cursor
     */
    var circle = new createjs.Shape();
    circle.graphics.setStrokeStyle(2).beginStroke("#171717").drawCircle(0, 0, size);


    /**
     * Hit area
     */
    var hit = new createjs.Shape();
    hit.graphics.beginFill("#000").drawCircle(0, 0, size);
    circle.hitArea = hit;


    var container = this.getContainer("cursor");
    container.addChild(circle);



    this.stage.on("stagemousemove", function(evt) {
        circle.setTransform(evt.stageX, evt.stageY);
        this.setChildIndex( container, this.getNumChildren()-1);
    });



    var drawing = this.setObject("image.mask", new createjs.Shape());
    drawing.visible = false;
    var lastPoint = new createjs.Point();

    container.addChild(drawing);



    circle.on("mousedown", function(event) {
        lastPoint.x = event.stageX;
        lastPoint.y = event.stageY;
    });

    circle.on("pressmove", function(event) {
       ...