JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<script src="http://rawgithub.com/lavrton/web-drawing-test/master/scripts/libs/fpsmeter.min.js"></script>


<div id="container"></div>
<div id="buttons">
    <input type="button" id="punch" value="Punch">
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>Image
<br>
<div id="mydiv"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #444;
    display: inline-block;
    width: 700px;
    height: 700px;
}
#buttons {
    position: absolute;
    top: 5px;
    left: 10px;
}
#buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
}

JavaScript

function setFPSMeter() {
    var RAF = (function () {
        return window["requestAnimationFrame"] || window["webkitRequestAnimationFrame"] || window["mozRequestAnimationFrame"] || window["oRequestAnimationFrame"] || window["msRequestAnimationFrame"] || FRAF;
    })();

    function FRAF(callback) {
        window.setTimeout(callback, 1000 / 60);
    }

    var fps = $("<div>").css({
        position: "absolute"
    }).appendTo("body");
    var meter = new FPSMeter(fps[0], {
        position: 'fixed',
        zIndex: 10,
        right: '5px',
        top: '5px',
        left: 'auto',
        bottom: 'auto',
        margin: '0 0 0 0',
        interval: 1000,
        graph: true,
        history: 20,
        theme: 'colorful',
        heat: true
    });
    var tick = function () {
        meter.tick();
        RAF(tick);
    };
    tick();
}

setFPSMeter();

//Kinetic.pixelRatio = 1;
var stage = new Kinetic.Stage({
    container: 'container',
    width: 700,
    height: 700
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function () {
    var blob = new Kinetic.Sprite({
        x: 150,
        y: 150,
        draggable: true,
        image: imageObj,
        animation: 'idle',
        animations: {
            idle: [
            // x, y, width, height (4 frames)
            0, 0, 150, 216,
            200, 0, 150, 216,
            400, 0, 150, 216 //,
            //   391,0,520,216
            ],
            punch: [
            // x, y, width, height (3 frames)
            //  2,138,74,122,
            0, 0, 150, 216,
            76, 138, 84, 122,
            346, 138, 120, 122]
        },
        frameRate: 4,
        frameIndex: 0
    });
    
    // performance
    blob.transformsEnabled('position');
   // layer.hitGraphEnabled(false);
    
    
    // add the layer to the stage
    stage.add(layer);

    // start sprite animation
    blob.start();
    
    setTimeout(function(){
        // add the shape to the layer
    ...