function init() {
    document.querySelector("#input1").addEventListener(
        "keyup",
        draw,
        false
    );
    draw();
}

function draw() {
    var width = 600;
    var height = 112;
    var canvas = document.querySelector("#ex1");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, width, height);
    ctx.W = function(txt) {
        var m = ctx.measureText(txt);
        return m.width;
    };
    var txt = document.querySelector("#input1").value; //  "Les étirements, c'est bon pour la santé !";

    ctx.font = "24px sans-serif";
    var w = ctx.W(txt);
    // Etirement bitmap.
    ctx.save();
    ctx.scale((width - 16) / w, 1);
    ctx.fillText(txt, 8, 32);
    ctx.restore();

    // Etirement des espaces entre les mots.
    var words = txt.split(" ");
    var wordsW = [];
    var fixedWidth = 0;
    for (var i=0 ; i<words.length ; i++) {
        var word = words[i];
        w = ctx.W(word);
        wordsW.push(w);
        fixedWidth += w;
    }
    var spc = (width - 16 - fixedWidth) / (words.length - 1);
    var x = 8;
    for (i=0 ; i< words.length ; i++) {
        ctx.fillText(words[i], x, 64);
        x += wordsW[i] + spc;
    }

    // Etirement des espaces entre les mots et entre les lettres,
    // mais moins prononcé pour les espaces entre les lettres.
    var nbBigSpaces = words.length - 1;
    var nbTinySpaces = 0;
    for (i=0 ; i< words.length ; i++) {
        var word = words[i];
        if (word.length > 0) {
            nbTinySpaces += word.length - 1;
        }
    }
    var minSpaceWidth = ctx.W("W");
    var zoom = 2.0;
    var a = nbBigSpaces * zoom,
    b = nbTinySpaces,
    c = - (width - 16 - fixedWidth);
    var delta = b * b - 4 * a * c;
    if (delta > 0) {
        var tinySpcWidth = (- b + Math.sqrt(delta)) / (2 * a);
        var bigSpcWidth = tinySpcWidth * tinySpcWidth * zoom;
        x = 8;
        for (i=0 ; i<words.length ; i++) {
            var word = words[i];
            for (var k=0 ; k<word.length ; k++) {
                var letter = word.charAt(k);
                if (k > 0) {
                    x += tinySpcWidth;
                }
                ctx.fillText(letter, x, 96);
                x += ctx.W(letter);
            }
            x += bigSpcWidth;
        }
    } else {
        ctx.save();
        ctx.fillStyle = "red";
        ctx.fillText("Echec de l'algorithme...", 8, 96);
        ctx.restore();
    }
}


if (window.addEventListener) {
    window.addEventListener("load", init, false);
} else if (document.addEventListener) {
    document.addEventListener("load", init, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", init);
}