Question

I try to make something like “live type” using html5 canvas, but I can’t get it. I also can’t find anything on the net about it. So, one can not do it only with html5? If someone knows a site with a model, it will be enough.

So I want to write some words live, as the user reads it, letter by letter.

Thanks!

(I did not post my code because I am so far from what I want that it is irrelevant 🙂

Answer 1

This can be done with canvas and a little JavaScript. I’ve put together a demo which should demonstrate the principles and provide you a starting point to work from.

For further reading, have a look at the documentation for setTimeout (which is used in the demo to create the animation loop which draws the characters) and the canvas.fillText method (there’s a decent looking tutorial here).

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');
    ctx.fillStyle = "black";
    ctx.font = "30px sans-serif";

    var words = "Hello world!";
    var count = 0;
    var pause = 500; // ms to wait before drawing next character

    var chars;

    function draw() {

        count ++;

        // Grab all the characters up to count
        chars = words.substr(0, count);

        // Clear the canvas each time draw is called
        ctx.clearRect(0, 0, c.width, c.height);

        // Draw the characters to the canvas
        ctx.fillText(chars, 0, 150);

        if (count < words.length)
            setTimeout(draw, pause);
    }

    draw();