Рисование текстом Canvas

<canvas id='canvas'></canvas>
<span id='info'>Начинайте рисовать<span>

<script>
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letters = "Сайт «Урааа» является также и источником полезной информации и материалов. У нас имеются следующие категории: HTML шаблоны, шаблоны для uCoz, шаблоны DLE, темы для WordPress, шаблоны для Joomla, шаблоны для Drupal, шаблоны для форумного движка phpBB, шаблоны для PHP-Nuke, иконки, иконки групп для форумов, PSD исходники, кисти для Photoshop, Flash исходники, скрипты JavaScript, скрипты PHP, скрипты Perl, скрипты ASP, скрипты для uCoz, CSS шаблоны и меню для сайта, шрифты и другое.";

// Drawing variables
var canvas;
var context;
var mouse = {x: 0, y: 0, down: false}

function init() {
  canvas = document.getElementById( 'canvas' );
  context = canvas.getContext( '2d' );
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
   
  canvas.addEventListener('mousemove', mouseMove, false);
  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('mouseup', mouseUp, false);
  canvas.addEventListener('mouseout', mouseUp, false);  
  canvas.addEventListener('dblclick', doubleClick, false);
   
  window.onresize = function(event) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  }
}

function mouseMove ( event ){
  mouse.x = event.pageX;
  mouse.y = event.pageY;
  draw();
}

function draw() {
  if ( mouse.down ) {
  var d = distance( position, mouse );
  var fontSize = minFontSize + d/2;
  var letter = letters[counter];
  var stepSize = textWidth( letter, fontSize );
   
  if (d > stepSize) {
  var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);
   
  context.font = fontSize + "px Georgia";
   
  context.save();
  context.translate( position.x, position.y);
  context.rotate( angle );
  context.fillText(letter,0,0);
  context.restore();

  counter++;
  if (counter > letters.length-1) {
  counter = 0;
  }
   
  //console.log (position.x + Math.cos( angle ) * stepSize)
  position.x = position.x + Math.cos(angle) * stepSize;
  position.y = position.y + Math.sin(angle) * stepSize;

  }
  }  
}

function distance( pt, pt2 ){
   
  var xs = 0;
  var ys = 0;
   
  xs = pt2.x - pt.x;
  xs = xs * xs;
   
  ys = pt2.y - pt.y;
  ys = ys * ys;
   
  return Math.sqrt( xs + ys );
}

function mouseDown( event ){
  mouse.down = true;
  position.x = event.pageX;
  position.y = event.pageY;
   
  document.getElementById('info').style.display = 'none';
}

function mouseUp( event ){
  mouse.down = false;
}

function doubleClick( event ) {
  canvas.width = canvas.width;  
}

function textWidth( string, size ) {
  context.font = size + "px Georgia";
   
  if ( context.fillText ) {
  return context.measureText( string ).width;
  } else if ( context.mozDrawText) {
  return context.mozMeasureText( string );
  }
   
  };

init();
</script>

<style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding:0px;
  overlfow: hidden;
  color: rgba(0,0,0,0.3);
}
html:hover span, body:hover span {
  display: none;
}

canvas {
  cursor: crosshair;
}

span {
  font-family: 'Georgia', cursive;
  font-size: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  color: #000;
  margin-top: -40px;
  margin-left: -200px;
}
</style>