Word Animation Function

by Nick Hulea

HTML

<script src="//use.typekit.net/aba1wjf.js"></script>
<canvas id="myCanvas">

CSS

@font-face {
    font-family:'TrajanPro3Bold';
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot');
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.svg#TrajanPro3Bold') format('svg');
}

JavaScript

try {
    Typekit.load();
} catch (e) {}

var W = window.innerWidth;
var H = window.innerHeight;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var fontSize = 12;
c.width = W;
c.height = H;

var upText = function (totalGrowth, time, word) {
    ctx.clearRect(0, 0, W, H);
    ctx.textAlign = 'center';
    ctx.font = 'bold ' + fontSize + "px trajan-pro-3";
    ctx.fillText(word, (W / 2), (H / 2));
    var growthPerFrame = time / totalGrowth / 60;
    fontSize += growthPerFrame;
    //console.log('font size: ', fontSize);
    if (fontSize > totalGrowth) {
        fontSize = totalGrowth;
    }

};

(function animloop() {
    window.requestAnimationFrame(animloop);
    upText(200, 20E3, 'BLACK JESUS');
})();