Cómo escribir texto en un lienzo HTML

Establezca el tamaño del lienzo mediante CSS o los atributos de ancho/alto HTML para que sea, por ejemplo, 200 x 400:

canvas/canvas

y asegúrese de configurar también las propiedades de ancho/alto del objeto canvas en JavaScript, para evitar que el texto se vea borroso, por ejemplo:

canvas.width = 1800canvas.height = 1200

Lo primero es obtener una referencia a un lienzo.

const canvas = document.querySelector('canvas')

y crear un objeto de contexto a partir de él:

const context = canvas.getContext('2d')

Ahora podemos llamar al fillText()método del objeto de contexto:

context.fillText('hi!', 100, 100)

Asegúrese de que las coordenadas x e y del punto de inicio estén incluidas en el tamaño del lienzo.

Puede pasar propiedades adicionales antes de llamar fillText()para personalizar la apariencia, por ejemplo:

context.font = 'bold 70pt Menlo'context.fillStyle = '#ccc'context.fillText('hi!', 100, 100)

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro