How can I animate the drawing of text on a web page?

by

I want this word to be drawn with an animation, such that the page
“writes” the word out the same way that we would

Canvas version

This will draw single chars more like one would write by hand. It uses a long dash-pattern where the on/off order is swapped over time per char. It also has a speed parameter.

Snapshot
Example animation (see demo below)

To increase realism and the organic feel, I added random letter-spacing, an y delta offset, transparency, a very subtle rotation and finally using an already “handwritten” font. These can be wrapped up as dynamic parameters to provide a broad range of “writing styles”.

For a even more realistic look the path data would be required which it isn’t by default. But this is a short and efficient piece of code which approximates hand-written behavior, and easy to implement.

How it works

By defining a dash pattern we can create marching ants, dotted lines and so forth. Taking advantage of this by defining a very long dot for the “off” dot and gradually increase the “on” dot, it will give the illusion of drawing the line on when stroked while animating the dot length.

Since the off dot is so long the repeating pattern won’t be visible (the length will vary with the size and characteristics of the typeface being used). The path of the letter will have a length so we need to make sure we are having each dot at least covering this length.

For letters that consists of more than one path (f.ex. O, R, P etc.) as one is for the outline, one is for the hollow part, the lines will appear to be drawn simultaneously. We can’t do much about that with this technique as it would require access to each path segment to be stroked separately.

Compatibility

For browsers that don’t support the canvas element an alternative way to show the text can be placed between the tags, for example a styled text:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

This produces the live animated stroke-on (no dependencies) –

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(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, 90);                               // 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.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();
canvas {background:url(http://i.imgur.com/5RIXWIE.png)}
<canvas width=630></canvas>

More Related Contents:

  1. HTML5 Canvas Resize (Downscale) Image High Quality?
  2. How to clear the canvas for redrawing
  3. Real mouse position in canvas
  4. how to draw smooth curve through N points using javascript HTML5 canvas?
  5. CanvasContext2D drawImage() issue [onload and CORS]
  6. Simulation background-size: cover in canvas
  7. Why is requestAnimationFrame better than setInterval or setTimeout
  8. HTML5 Canvas camera/viewport – how to actually do it?
  9. How to save image from canvas with CSS filters
  10. I want to do animation of an object along a particular path
  11. How to show a running progress bar while page is loading
  12. How can I stop the alpha-premultiplication with canvas imageData?
  13. Draw border around nontransparent part of image on canvas
  14. How to draw polygons on an HTML5 canvas?
  15. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  16. Count down timer with circular progress bar
  17. addEventListener for keydown on Canvas
  18. Load image from url and draw to HTML5 Canvas
  19. Canvas image masking / overlapping
  20. Limit labels number on Chart.js line chart
  21. How can I animate a progressive drawing of svg path?
  22. Save canvas as jpg to desktop [duplicate]
  23. Saving canvas to image via canvas.toDataURL results in black rectangle
  24. Resize a Base-64 image in JavaScript without using canvas
  25. canvas getContext(“2d”) returns null
  26. clearing circular regions from HTML5 Canvas
  27. HTML5 Canvas API – formatting individual words with italics
  28. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  29. True Isometric Projection with HTML5 Canvas
  30. Split text into pages and present separately (HTML5)

Leave a Comment