Monster Card - vertical aligned skills

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="p-monstercard">
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" style="bottom:657px" />
        <img class="mc-monster" src="http://www.playa.cc/pic/tiger_B_inferneo.png" />
        <div class="mc-head p-textShadow"><span style="color:gold;font-size:20px">
            &#9733;&#9733;&#9733;</span> Flarion<img style="float: right;width: 1em;" src="http://www.playa.cc/pic/favorite-button.png" />
        </div>
        <div class="p-stats p-border1">
            <div class="mc-attributes">
                <div style="background-image:url(http://www.playa.cc/pic/orb-red4.png)"/>999</div>
                <div style="color:#00ff00;font-weight:bold;background-image:url(http://www.playa.cc/pic/orb-green4.png)">999</div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-blue4.png);-webkit-filter:grayscale(1)"></div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-light4.png);-webkit-filter:grayscale(1)"></div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-dark4.png)">999</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 class="mc-skill-header" style="background:url(http://www.playa.cc/pic/glass-heart.png) no-repeat left top;">Color of Healing</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus convallis elementum.wwwww wwwww
            </div>
         ...

CSS

canvas {
    border:0px solid red;
    position:absolute;
}

.p-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-monstercard .mc-head {
border: 0px inset gold;
    font-size: 48px;
    font-weight:bold;
    position: absolute;
    text-align: center;
    top: 295px;
    right: 0;
    margin: 0 auto;
    width: 95%;
    left: 0;
    background-image: url(http://www.playa.cc/pic/orb-red4.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1em;
}

.p-monstercard .mc-monster {
    position:absolute;
    bottom:665px;
    left:0;
    right:0;
    display:block;
    margin:auto
}
.p-monstercard .p-stats {
    position: absolute;
    top: 375px;
    width: 90%;
    right: 0;
    margin: 0 auto;
    left: 0;
    height: 400px;
}

.p-monstercard .mc-attributes {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    padding-top:10px
}
.p-monstercard .mc-attributes div {
    background-size: 72px;
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    min-width: 72px;
    /* height: 3em; */
    padding-top: 75px;
}

.p-monstercard .mc-skill {
    height: 150px;
    overflow-y: hidden;
    position: absolute;
    top: 150px;
    background-color:white;
    color:black;
    padding:5px;
    font-size:30px;
}
.p-monstercard .mc-skill .mc-skill-header {
    font-weight:bold;
    padding-left:50px;
    padding-bottom:5px;
}
.mc-additional-stats {
    position: absolute; 
    bottom:10px;
    left: 0;  
    right: 0;
}
.p-monstercard .mc-hitpoints {
        background: url(http://www.playa.cc/pic/heart1.png) no-repeat left center;    
    background-size: 1.3em;    
    width: 20%;    
    text-align: right;
    position:...

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 = 0;
//domElement.y = canvas.offsetHeight * 0.5;
domElement.y = 0;
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);

};