JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<div id="pusher" width="320" height="480">
    <canvas id="ct" width="240" height="360" style="background-color:#FF7700"></canvas>
</div>
<div id="outp"></div>

CSS

#pusher {  background-color: transparent; }
#outp { background-color: #ccc; color: blue; padding:1em}

JavaScript

$('div').mouseover(function() {
    $(this).css('background-color','#f0f');
    //event.preventDefault();
});

$('div').mouseout(function() {
    $(this).css('background-color','transparent');
    //event.preventDefault();
});


Bitmap.prototype.setWidth = function(w) {
    if (this.image.width === 0) {
        return;
    }

    this.scaleX = w / this.image.width;
};

Bitmap.prototype.setHeight = function(h) {
    if (this.image.height === 0) {
        return;
    }

    this.scaleY = h / this.image.height;
};


var stage = new Stage(document.getElementById("ct"));
Ticker.setFPS(5);
Ticker.addListener(this);

var bmp = new Bitmap("http://context.ravewebmedia.co.uk/ctx/assets/images/001.png");

stage.addChild(bmp);

bmp.image.onload = function() {
    bmp.setWidth(stage.canvas.width);
    bmp.setHeight(stage.canvas.height);
    //bmp.x = stage.canvas.width/2;
    //bmp.x = bmp.image.width * bmp.scaleX / 3;
    $('#outp').html("width: " + bmp.image.width*bmp.scaleX);
};

this.tick = function() {
    stage.update();
};