Text Reflection

by ian_smithz

HTML

<canvas id="can" height="220" width="320"></canvas>

JavaScript

var can, ctx;

function init() {
    can = document.getElementById("can");
    ctx = can.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.font = "72pt Helvetica";
    ctx.fillText("SirFizX", 0, 100);
    ctx.setTransform(1, 0, 0, -1, 0, 0); 
    ctx.scale(1, 1.5);
    var grad = ctx.createLinearGradient(0, -50, 0, -160);
    grad.addColorStop(0, 'blue');
    grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = grad;
    ctx.fillText("SirFizX", 0, -102 / 1.5);
}

init();