Typewriter effect in html Canvas with a dynamic text box

A little something I whipped up:

// Method added to CreateJS Text object to add text one character at a time

// Arguments:

//  text: text to add

//  cps: characters per second (optional; default 12)

//  clear: clear current contents of textfield (optional; default false)

//  callback: function to call when done (optional)

cjs.Text.prototype.type = function(text, cps, clear, callback) {

    if (clear) {

        this.text = "";

    }

    if (this.typeData) {

        clearInterval(this.typeData.timer);

    }

    this.typeData = {text: text, callback: callback, chars: 0};

    this.typeData.timer = setInterval(function() {

        var td = this.typeData;

        this.text += td.text.charAt(td.chars);

        if (td.chars++ === td.text.length - 1) {

            clearInterval(td.timer);

            if (td.callback) {

                td.callback.call(this);

            }

        }

    }.bind(this), 1000 / (cps ? cps : 12));

}

Just stick the above code anywhere in your setup/initialization frame, then use as, for example:

this.test.type("This is a test.");

Or:

this.test.type("This is another test.", 24, false, doSomethingWhenDone);

Note that if you specify a character rate higher than the stage's frame rate, you'll see multiple consecutive characters appear at once.

use a loop (eg, setInterval or tick) to sequentially add letters.  eg,

var s = 'this is your text';

var F = f.bind(this);

this.addEventListener("tick", F);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

this.removeEventListener('tick',F);

}

}