Cambio de línea
En JavaScript el metacarácter \n se utiliza para insertar un salto de línea.
alert("esto inserta un\nsalto de l\355nea")La mala noticia es que esto no funciona en el <canvas> de html5.
La buena noticia es que, utilizando el método measureText(), podemos escribir una función para insertar saltos de línea. Veamos como queda.
Más información acerca del uso de símbolos en javaScript.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var maxWidth = 190;
var padding = 30;
var maxWidth = canvas.width - 2*padding;
var texto = "El veloz murci\351lago hind\372 com\355a feliz cardillo y kiwi. La cig\374e\361a tocaba el saxof\363n detr\341s del palenque de paja.";
var x = padding;
var y = 50;
var alturaDeLinea = 25;
ctx.font = "12px Arial";
ctx.fillStyle = "#333";
// llama la función ajusteDeTexto
ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea);
}
}
function ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea){
// crea el array de las palabras del texto
var palabrasRy = texto.split(" ");
// inicia la variable var lineaDeTexto
var lineaDeTexto = "";
// un bucle for recorre todas las palabras
for(var i = 0; i < palabrasRy.length; i++) {
var testTexto = lineaDeTexto + palabrasRy[i] + " ";
// calcula la anchura del texto textWidth
var textWidth = ctx.measureText(testTexto).width;
// si textWidth > maxWidth
if (textWidth > maxWidth && i > 0) {
// escribe en el canvas la lineaDeTexto
ctx.fillText(lineaDeTexto, x, y);
// inicia otra lineaDeTexto
lineaDeTexto = palabrasRy[i]+ " " ;
// incrementa el valor de la variable y
//donde empieza la nueva lineaDeTexto
y += alturaDeLinea;
}else {// de lo contrario, si textWidth <= maxWidth
lineaDeTexto = testTexto;
}
}// acaba el bucle for
// escribe en el canvas la última lineaDeTexto
ctx.fillText(lineaDeTexto, x, y);
}