Random Text with Canvas

HTML5 canvas demo

HTML

<canvas id="myCanvas" width="500" height="400" />

CoffeeScript

$(document).ready ->
		text_render = "EXAMPLE"
    convas                     = document.getElementById('myCanvas')
    ctx                        = convas.getContext('2d')
    os                         = document.createElement('canvas')
    octx                       = os.getContext('2d')
    textHeight = 150
    octx.font = "20px Georgia"
    octx.textBaseline = 'top'
    octx.textAlign = 'center'
    
    octx.fillText text_render, convas.width * 0.5, 5, convas.width
    
    a = []
    i = 0
    while i <= text_render.length
          ch = text_render.charAt(i)
          x = octx.measureText(ch).width
          a.push x
          ++i
   	
   	le = octx.measureText(text_render).width
   	
   	diff = convas.width - le
   	diff = diff / 2
   	a_last = a[a.length - 2]
   	a_first = a[0]

   	if le > convas.width
     	diff = 0
     	a_last = (convas.width) / (a.length - 1)
     	a_first = (convas.width) / (a.length - 1)
   	
   	text_w = convas.width - diff
   	
   	while i--
          p = textHeight
          if i > text_w - (a_last)
            textHeight = textHeight - 25
          if i < diff + a_first
            textHeight = textHeight - 25
          ctx.drawImage os, i, offsetY, 1, textHeight, i, offsetY, 1, 0
          textHeight = p