¿Es posible escribir texto en HTML5 canvas?

Dibujar texto en un lienzo

Margen:

<canvas id="myCanvas" width="300" height="150"></canvas>

Script (con pocas opciones diferentes):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

Consulte la documentación de MDN y este ejemplo de JSFiddle .

Canvasel soporte de texto es realmente muy bueno - se puede controlar font, size, color, horizontal alignment, vertical alignment, y se puede también obtener medidas del texto para obtener el ancho de texto en píxeles. Además, también se puede utilizar tela transformsa rotate, stretche incluso inverttexto.

Es realmente fácil escribir texto en un lienzo. No estaba claro si desea que alguien ingrese texto en la página HTML y luego haga que ese texto aparezca en el lienzo, o si iba a usar JavaScript para escribir la información en la pantalla.

El siguiente código escribirá algo de texto en diferentes fuentes y formatos en su lienzo. Puede modificar esto como desee para probar otros aspectos de la escritura en un lienzo.

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools. 

Puede colocar la etiqueta de ID del lienzo en el HTML y luego hacer referencia al nombre o puede crear el lienzo en el código JavaScript. Creo que en su mayor parte veo la <canvas>etiqueta en el código HTML y, en ocasiones, veo que se creó dinámicamente en el propio código JavaScript.

Código:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);

Depende de lo que quieras hacer con eso, supongo. Si solo quieres escribir un texto normal, puedes usarlo .fillText().

Sí, por supuesto, puede escribir un texto en el lienzo con facilidad, y puede establecer el nombre de la fuente, el tamaño de la fuente y el color de la fuente. Hay dos métodos para construir un texto en Canvas, es decir, fillText () y strokeText () . El método fillText () se usa para hacer un texto que solo se puede rellenar con color, mientras que strokeText () se usa para hacer un texto que solo se le puede dar un color de contorno. Entonces, si queremos construir un texto que se llene de color y tenga color de contorno, debemos usar ambos.

Aquí el ejemplo completo, cómo escribir texto en lienzo:

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

Aquí la demostración de esto, y puedes probar tu mismo para cualquier modificación: http://okeschool.com/examples/canvas/html5-canvas-text-color

Encontré un buen tutorial en oreilly.com .

Código de ejemplo:

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

cortesía: @Ashish Nautiyal

Es fácil escribir texto en un lienzo. Digamos que tu lienzo se declara como a continuación.

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

Esta parte del código devuelve una variable en el lienzo, que es una representación de su lienzo en HTML.

  var c  = document.getElementById("YourCanvas");

El siguiente código devuelve los métodos para dibujar líneas, texto, rellenos en su lienzo.

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

Hay una guía para principiantes en Amazon para kindle http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + lienzo + principiantes que bien valen la pena. Lo compré hace un par de días y me mostró muchas técnicas simples que fueron muy útiles.