CodePen

HTML

            
              <canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
</canvas>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function( callback ){
      window.setTimeout(callback, 1000 / 60);
    };
})();

var c   = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var fontSize   = 12;

var render = function(totalGrowth, time) {
  ctx.clearRect(0, 0, 1000, 500);
  ctx.font = fontSize + "px Arial";
  ctx.fillText("Hello World",200,150);
  
  var growthPerFrame = time / totalGrowth / 60;
  fontSize += growthPerFrame;
  //console.log('font size: ', fontSize);
  if (fontSize > totalGrowth) fontSize = 12;
};
  
(function animloop(){
  window.requestAnimFrame(animloop);
  render(100, 5000);
})();







            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................