Monopoly Tile Canvas

by Chris Watson

HTML

<canvas></canvas>

CSS

canvas{
    position:absolute;
    top:0;
    left:0;
}

JavaScript

canvas = document.getElementsByTagName('canvas')[0];
//    fillCanvasToPage();
getURLArgs();
drawTile(
    getArgValue('colour'),
    getArgValue('name'),
    getArgValue('price'),
    getArgValue('width'),
    getArgValue('height'),
    getArgValue('currency')
);
function drawTile(colour, name, price, w, h, currency){
    if(w == '' && h == '')
        document.write('Must specify width and/or height');
    else{
        var downScalar = 11 / 18, upScalar = 1 / downScalar;
        var width = + ( w == '' ? h * downScalar : w ); // + acts like parseInt
        var height = + ( h == '' ? w * upScalar : h );
        var p = parent.document.getElementById('preview');
        if(p){
            p.style.width = width + 'px';
            p.style.height = height + 'px';
        }
        var lineSize = width / 50;
        var xy = Math.round(lineSize / 2);
        canvas.width = Math.round(width);
        canvas.height = Math.round(height);
        width -= lineSize; // chop off border 'overflow' from overall dimensions (half of line overflows top/bottom and left/right so = whole in each direction)
        height -= lineSize;
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");
            if(colour != ''){
                ctx.fillStyle = '#bdebce';
                ctx.fillRect(xy, xy, width, height);
                ctx.fillStyle = colour;
                ctx.fillRect(xy, xy, width, height / 4);
                ctx.lineCap = 'butt';
                ctx.strokeStyle = '#000';
                ctx.lineWidth = lineSize;
                ctx.strokeRect(xy, xy, width, height);
                ctx.beginPath();
                ctx.moveTo(xy, height / 4);
                ctx.lineTo(width, height / 4);
                ctx.stroke();
                if(name != ''){
                    setTextFormatting();
                    var t = name.toUpperCase().replace(/[\s\+]+/g,'+').split('+');
                    var top = height * 0.4;
                    var...