Menú Cerrar

Dibujar un pixel en el canvas de HTML5

Lo normal cuando se aprende un lenguaje o se empieza en un sistema/entorno es hacer un «hola mundo», en mi caso si hay capacidad gráfica disponible lo que intento siempre es dibujar un único pixel en una posición concreta, a modo de ejercicio. Hay que entender lo básico para hacer luego cosas más complicadas. Ya se que pintar un único pixel tiene poca utilidad ya que ponerse a dibujar cualquier cosa punto a punto tiene poco de eficiente. No hay ningún método o función especifico tipo «setPixel» disponible para el contexto del canvas de HTML5 por lo que hay que hay que hacerlo indirectamente.

La forma más sencilla de dibujar un pixel es utilizar el método fillRect(x,y,ancho,alto) el cual sirve para rellenar un rectángulo con el color establecido antes en la propiedad fillStyle. Basta con dibujar un rectángulo de 1×1 y ya tendremos nuestro pixel:

1

 

Es posible que un sólo pixel sea imposible de ver dependiendo del tamaño y resolución de la pantalla. En este caso doy una pista, es un pixel negro en el centro del cuadrado gris.

Con esto concluyo este post. En próximos posts iré hablando sobre más cosas que se pueden hacer con el canvas de HTML5, cosas básicas y algún que otro efecto visual clásico.