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="320"></canvas>
</div>
<div id="outp"></div>

CSS

#pusher {
  background-color: #FF7700;
  padding:0;
  margin:0
}
#ct {
  padding:0;
  margin:0
}
#outp {
  background-color: #ccc;
  color: blue;
  padding:0.5em;
  margin:0
}
.purplish#pusher, .purplish#outp {
  background-color:#f0f;
}

JavaScript

$(document).ready(function () {
  
  $('div').mouseover(function () {
      $(this).addClass('purplish');
  })    
  .mouseout(function () {
    $(this).removeClass('purplish');
      //$(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();
};