Letters by Adam Schwartz

Basic usage

Letters.draw(canvas, 1000)

Drawing custom letters

Letters.draw(canvas, 1000, { letter: function() {
  return Math.random() > .5 ? '★' : '→'
}})

Drawing in color

Letters.draw(canvas, 1000, { color: function(){
  return 'rgb(' + Math.floor(255 * Math.random()) + ', 0, 0)'
}})

Animate drawing

runs = 0;
interval = setInterval(function(){
  Letters.draw(canvas, 1);

  runs += 1;
  if (runs > 500) {
    clearInterval(interval)
  }
})

Drawing around objects

text = 'LETTERS';

context.fillStyle = '#fff';
context.globalCompositeOperation = 'source-over';
context.fillRect(0, 0, canvas.width, canvas.height);

context.globalCompositeOperation = 'destination-out';
fontSize = 100;
context.font = 'bold ' + fontSize + 'px/normal "Gill Sans"';
context.textBaseline = 'top';
context.fillText(text,
  (canvas.width - context.measureText(text).width) / 2,
  (canvas.height - (fontSize * 1.17)) / 2
);

context.fillStyle = '#000';
context.globalCompositeOperation = 'source-over';
Letters.draw(canvas, 50000, { letter: function() {
  return text[Math.floor(Math.random() * text.length)]
}})