Eu tenho uma pequena função que achei que pega uma string de umtextarea e depois coloca em umcanvas elemento e quebra o texto quando a linha fica muito longa. Mas não detecta quebras de linha. Isto é o que está fazendo e o que deve fazer:

Entrada:

Hello

This is dummy text that could be inside the text area.
It will then get put into the canvas.

Saída errada:

Hello this is dummy text
that could be inside the
text area. It will then
get put into the canvas.

O que deve gerar:

Hello

This is dummy text that
could be inside the text
area. It will then get
put into the canvas.

Esta é a função que estou usando:

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}

É possível alcançar o que estou tentando obter? Ou existe uma maneira de simplesmente mover a área de texto como está na tela?