Пример применения событий мыши, графическое рисование. Mouse Event Canvas

http://yraaa.ru/publ/3-1-0-1608

http://tholman.com/texter/

Дизайнер и проектор Тим Холман написал текстовую рисовалку на основе Canvas.
Код HTML

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

<script>
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letters = "";

// 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>
Код CSS

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