Monster Card 2

by stot

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="page" style="position:relative">
    <canvas id="canvas" width="200" height="200"></canvas>
    <div id="monster123" class="monsterCard p-border3">
        <div class="mc-head">Flarion<span style="float:right;padding-right:10px;color:gold;">&#9734;</span>
        </div>
        <div class="mc-monster-border p-borderx"></div>
        <div class="mc-monster-bg"></div>
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" />
        <img class="mc-monster" src="http://www.playa.cc/pic/tiger_B_inferneo.png" />
        <div class="p-stats p-border1">
            <div class="mc-attributes">
                <div style="background-image:url(http://www.playa.cc/pic/orb-red4.png)">113</div>
                <div style="color:#00ff00;font-weight:bold;background-image:url(http://www.playa.cc/pic/orb-green4.png)">15</div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-blue4.png)">-</div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-light4.png)">23</div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-dark4.png)">-</div>
                <div style="color:#ff00ff;font-weight:bold;background-image:url(http://www.playa.cc/pic/orb-heart.png)">5</div>
            </div>
            <div class="mc-skill">
                <div style="font-weight:bold;background:url(http://www.playa.cc/pic/glass-heart.png) no-repeat right center;">Skill</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus convallis elementum. Vivamus id vulputate quam, sed cursus. blah blah</div>
            <div style="    clear: both;    border-top: 1px solid gold;    position: absolute;    bottom: 0;   ...

CSS

canvas {
    border:0px solid red;
    background-color:#aaa;
    //width:100%;
    //height:100%;
    position:absolute;
}
#page {
    border:0px solid blue;
}
.monsterCard {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    width:640px;
    height:960px;
    font-size:36px;
    position:absolute;
    color:white;
    //background-image:url(http://www.playa.cc/pic/scene16.jpg);
    //background-color:rgba(0, 0, 0, 0);
}
.p-border1 {
    border-style: solid;
    border-width: 18px 19px 19px 18px;
    -moz-border-image: url(http://www.playa.cc/pic/border1.png) 18 19 19 18 stretch;
    -webkit-border-image: url(http://www.playa.cc/pic/border1.png) 18 19 19 18 stretch;
    -o-border-image: url(http://www.playa.cc/pic/border1.png) 18 19 19 18 stretch;
    border-image: url(http://www.playa.cc/pic/border1.png) 18 19 19 18 fill stretch;
}
.p-border {
    border-style: solid;
    border-width: 24px 24px 25px 23px;
    -moz-border-image: url(http://www.playa.cc/pic/border.png) 24 24 25 23 stretch;
    -webkit-border-image: url(http://www.playa.cc/pic/border.png) 24 24 25 23 stretch;
    -o-border-image: url(http://www.playa.cc/pic/border.png) 24 24 25 23 stretch;
    border-image: url(http://www.playa.cc/pic/border.png) 24 24 25 23 fill stretch;
}
.p-border2 {
    border-style: solid;
    border-width: 18px 19px 19px 18px;
    -moz-border-image: url(http://www.playa.cc/pic/border2.png) 18 19 19 18 stretch;
    -webkit-border-image: url(http://www.playa.cc/pic/border2.png) 18 19 19 18 stretch;
    -o-border-image: url(http://www.playa.cc/pic/border2.png) 18 19 19 18 stretch;
    border-image: url(http://www.playa.cc/pic/border2.png) 18 19 19 18 fill stretch;
}
.p-border3 {
    border-style: solid;
    border-width: 19px;
    -moz-border-image: url(http://local.playa.cc/pic/border3.png) 19 stretch;
    -webkit-border-image: url(http://local.playa.cc/pic/border3.png) 19 stretch;
    -o-border-image: url(http://local.playa.cc/pic/border3.png) 19 stretch;
   ...

JavaScript

canvas = document.getElementById("canvas");
resize();
var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);


var healthBar = new createjs.Bitmap('http://www.playa.cc/pic/healthbar.png');
healthBar.scaleX = 100;
healthBar.x = 100;
healthBar.y = 100;
//stage.addChild(healthBar);

var text = document.getElementById("monster123");
var domElement = new createjs.DOMElement(text);
//domElement.regX = text.offsetWidth*0.5;
//domElement.regY = text.offsetHeight*0.5;
var scale = $('canvas').data('scale');
domElement.scaleX = 1 / 2;
domElement.scaleY = 1 / 2;
console.log(canvas.offsetWidth + ', ' + canvas.height + ', ' + $('canvas').data('scale'));
//domElement.x = canvas.offsetWidth * 0.5;
domElement.x = 50;
//domElement.y = canvas.offsetHeight * 0.5;
domElement.y = 50;
stage.addChild(domElement);



function tick(event) {
    stage.update();
}



window.addEventListener('resize', resize);

function resize() {

    // calculate width and height
    var maxWidth = window.innerWidth; // Max width for the image
    var maxHeight = window.innerHeight; // Max height for the image
    var width = canvas.width; // Current image width
    var height = canvas.height; // Current image height

    // calculate ratio
    var ratio = [maxWidth / width, maxHeight / height];
    ratio = Math.min(ratio[0], ratio[1]);

    // adjust canvas size
    canvas.style.width = Math.floor(width * ratio) + 'px';
    canvas.style.height = Math.floor(height * ratio) + 'px';
    $('#canvas').data('scale', ratio);

};