según pude ver, canvas no tiene soporte para texto de múltiples líneas. tienes que invocar varias veces el método que imprime el texto pero con distintas coordenadas en el eje de Y. en ese ejemplo particular no hay forma de manejarlo porque la función writeMessage siempre imprime en la misma posición. se me ocurre que podrías adaptar la función y determinar si en el texto existen saltos de líneas. en base al número de salto de líneas calculas e imprime el texto. claro, tienes que partir el texto por los saltos de líneas para saber que porción escribir. a continuación una adaptación ligera, puedes usarlo como base o idea.
Código:
function writeMessage(messageLayer, message){
messageLayer.clear();
var textLines = message.split(/[\r\n]+/);
var context = messageLayer.getContext();
context.fillStyle = "black";
context.fillRect(0, 0, 300, 40*textLines.length);
context.font = "20pt Calibri";
context.fillStyle = "white";
for(var i = 0, len = textLines.length; i < len; i++) context.fillText(textLines[i], 10, 30*(i+1));
}
tiene un pequeño quirk desagradable. si tienes muchas líneas verás que se crea un parcho negro sobre la imagen. estoy casi seguro que el fondo se puede hacer transparente pero no manejo canvas.