Cambiar color de fondo a canvas con JavaScript

En este corto post te mostraré cómo cambiar el color de fondo o background de un canvas HTML usando JavaScript.

Básicamente vamos a colorear todo el canvas o limpiar el canvas dibujando un rectángulo que tendrá las mismas dimensiones que el canvas.

Al final con lo que te mostraré aprenderás a cambiar el color de un canvas con JavaScript.

Cambiar color de fondo a canvas

Primero tienes que tener una referencia al canvas, ya sea con querySelector o con getElementById. Luego de eso debes obtener el contexto para dibujar un rectángulo.

El truco para limpiar el canvas es dibujar un rectángulo pero usando la anchura y altura del mismo. Podemos acceder a ellos través de width y height.

En este caso tengo mi canvas con el id canvas, lo recupero en la línea 1, luego accedo al contexto en la línea 2; establezco el color de fondo en la línea 4 y finalmente dibujo el rectángulo en la línea 5.

Con todo esto ya he cambiado el color de fondo del canvas usando JavaScript.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario