JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://upload.eggwee.co.uk/public/TweenLite.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<canvas id="stageCanvas" width="500" height="400"></canvas>

JavaScript

var anchor = [50,200];

var canvas;
var stage;
var txt;
var count = 0;

function init() {
    console.log('init');
    canvas = document.getElementById("stageCanvas");
    stage = new createjs.Stage(canvas);
    
    txt = new createjs.Text("text on the canvas... 0!", "36px Arial", "#000");
    txt.x = 100;
    txt.y = 80;
    txt.rotation = 20;
    stage.addChild(txt);    
    
    shape = new createjs.Shape();
    shape.x = txt.x;
    shape.y = txt.y;
    shape.rotation = txt.rotation;
    stage.addChildAt(shape,0);
    
    createjs.Ticker.setFPS(100);
    createjs.Ticker.addListener(window);
}

function tick() {
    count++;
    txt.text = "text on the canvas... "+count+"!";
    
    shape.graphics.clear().beginFill("#F00").drawRect(-10, -10, txt.getMeasuredWidth()+20, 36+20);
    
    stage.update();
}

init();