Capítulo 4

Canvas - Exemplo 27: Textos e fontes.

Conteúdo alternativo para navegadores que não suportam canvas.

JavaScript

<script>
	// Texto referência em cinza 
	ctx.font = '50px serif' ;
	ctx.fillStyle = '#ccc';
	ctx.fillText('Maujor', 200, 100)
	// Linha referência em azul 
	ctx.moveTo(0,101);
	ctx.lineTo(400,101);
	ctx.strokeStyle = '#00f';
	ctx.stroke();
	// Texto a alinhar em vermelho
	ctx.font = '50px serif' ;
	ctx.fillStyle = 'rgba(200, 0, 0, 0.6)';
	ctx.textAlign = escolha;
	ctx.fillText('Maujor', 200, 100)
</script>

CSS

	canvas {border:1px solid #ccc;}

HTML

	<canvas id="quadro" width="400" height="200">
		<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
	</canvas>