Animated handwriting

by ciroxxx

HTML

<canvas width=630></canvas>

CSS

canvas {
  background: url(http://i.imgur.com/5RIXWIE.png)
}

JavaScript

var ctx = document.querySelector("canvas").getContext("2d"),
  dashLen = 50,
  dashOffset = dashLen,
  speed = 4,
  txt = "HELPEE",
  x = 30,
  i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.globalAlpha = 1 / 3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.stroke(); // Draw it

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed; // reduce dash length
  ctx.strokeText(txt[i], x, 50); // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop); // animate
  else {
    //ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen; // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
    ctx.rotate(Math.random() * 0.085); // random rotation

    if (i < txt.length) requestAnimationFrame(loop);
  }
})();