É possível escrever texto em HTML5 canvas?

Desenho de texto em uma tela

Marcação:

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

Script (com poucas opções 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>

Confira a documentação do MDN e este exemplo do JSFiddle .

Canvassuporte de texto é realmente muito bom - você pode controlar font, size, color, horizontal alignment, vertical alignment, e você também pode obter métricas de texto para obter a largura do texto em pixels. Além disso, você também pode usar lona transformspara rotate, stretche até mesmo inverttexto.

É realmente fácil escrever texto em uma tela. Não ficou claro se você deseja que alguém insira texto na página HTML e faça com que esse texto apareça na tela ou se você usaria JavaScript para gravar as informações na tela.

O código a seguir gravará algum texto em diferentes fontes e formatos na sua tela. Você pode modificar isso como deseja testar outros aspectos da gravação em uma tela.

 <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. 

Você pode colocar a tag de ID da tela no HTML e fazer referência ao nome ou criar a tela no código JavaScript. Eu acho que, na maioria das vezes, vejo a <canvas>tag no código HTML e, de vez em quando, ela é criada dinamicamente no próprio 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 do que você quer fazer com isso, eu acho. Se você quiser apenas escrever um texto normal, pode usar .fillText().

Sim, é claro que você pode escrever um texto na tela com facilidade e definir o nome da fonte, o tamanho e a cor da fonte. Existem dois métodos para criar um texto no Canvas, como fillText () e strokeText () . O método fillText () é usado para criar um texto que só pode ser preenchido com cores, enquanto que strokeText () é usado para criar um texto que pode receber apenas uma cor de contorno. Portanto, se queremos criar um texto que seja preenchido com cores e contenha cores de contorno, devemos usar os dois.

aqui o exemplo completo, como escrever texto na tela:

<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>

Aqui está a demonstração disso, e você pode tentar por qualquer modificação: http://okeschool.com/examples/canvas/html5-canvas-text-color

Encontrei um bom tutorial em oreilly.com .

Código de exemplo:

<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>

cortesia: @Ashish Nautiyal

É fácil escrever texto em uma tela. Vamos dizer que sua tela é declarada como abaixo.

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

Essa parte do código retorna uma variável na tela, que é uma representação da sua tela em HTML.

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

O código a seguir retorna os métodos para desenhar linhas, texto e preenchimentos na tela.

  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>

Há um guia para iniciantes na Amazon para o 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 + canvas + iniciantes que vale bem o dinheiro. Comprei-o há alguns dias e me mostrou muitas técnicas simples que eram muito úteis.