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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: