Mediante la propiedad font, podremos establecer el estilo de fuente tipográfica, el tamaño y color, entre otras variables tipográficas. Vamos a poder aplicar todas estas variables mediante una cadena (string) aplicada a la propiedad font. El estilo tipográfico puede ser: normal, italic y bold. A menos que este sea especificado, el valor por defecto para la tipografía es normal. Una vez que se ha establecido la propiedad font podremos dibujar el texto mediante el uso del método fillText(). Como hemos mencionado, este requiere una cadena de valores tipográficos y una posición en el espacio. Veamos un ejemplo de código para comprender mejor este método:
<body>
<canvas id=”creartexto” width=”978” height=”200”></canvas> <script> var canvas = document. getElementById(‘creartexto’); var context = canvas.getContext(‘2d’);
context.font = ‘italic 40pt Calibri’; context.fillText(‘Hola, hoy es un gran día!’,10, 100); </script> </body>
Veamos con mayor detalle este ejemplo. Con la sentencia:
context.font = ‘italic 40pt Calibri’;
Podemos establecer la variable tipográfica, el tamaño y la fuente tipográfica que queremos usar. Mientas que con el método fillText() vamos a agregar el contenido de texto que deseemos: context.fillText(‘Hola, hoy es un gran día!’,10, 100);
Mediante esta sentencia, también determinamos las coordenadas de X e Y donde queremos que se dibuje la cadena de caracteres. Agregando color a los textos Hasta aquí hemos visto cómo introducir un texto dentro de la etiqueta <canvas> y cómo modificar sus propiedades básicas (como fuente tipográfica, tamaño y estilo).
Ahora bien, si queremos modificar el color de la tipografía debemos agregar una nueva sentencia, mediante la propiedad fillStyle. Esta propiedad admite tanto un valor expresado en hexadecimal como en RGB. Veamos un ejemplo para entender mejor cómo usar esta propiedad:
<body>
<canvas id=”colortexto” width=”578” height=”170” style=”border:1px solid red”></canvas> <script> var canvas = document.getElementById(‘colortexto’); var context = canvas.getContext(‘2d’);
context.font = ‘bold 40pt Calibri’; context.fillStyle = ‘red’; context.fillText(‘¡Texto en color!’, 100, 100); </script> </body>
Creando tipografías con contornos Si lo que queremos es crear tipografías que tengan contornos, podemos usar la propiedad strokeStyle. Al igual que fillStyle, esta puede usar un valor expresado en hexadecimal o bien en RGB, no obstante esta propiedad sólo se aplicará si estamos usando también el método strokeText(). Veamos un ejemplo de código para comprender mejor cómo usar estas propiedades:
<body>
<canvas id=”contorno” width=”578” height=”200”></ canvas> <script> var canvas = document.getElementById(‘contorno’); var context = canvas.getContext(‘2d’); var x = 80; var y = 110;
context.font = ‘60pt Calibri’; // grosor del contorno context.lineWidth = 3; // color del contorno context.strokeStyle = ‘blue’; context.strokeText(‘Have a nice day!’, x, y); </script> </body>
Como podemos ver en el ejemplo anterior, además el color del contorno, debemos agregar la propiedad lineWidth, que ya hemos visto en capítulos anterior. Esta nos permitirá establecer el grosor del contorno tipográfico. Para establecer el relleno y el contorno de una tipografía, es obligatorio usar los métodos fillText() y strokeText() de forma conjunta. Una buena práctica es utilizar el método fillText() antes que el método strokeText(), de esta forma nos aseguraremos que el contorno del texto será renderizado de forma correcta por el navegador.