Estas son las imágenes que he pintado con Canvas (HTML y Javascript)

 

Para crear una imagen con Canvas en JavaScript, puedes seguir estos pasos en el código. Primero, establece un lienzo HTML y luego usa JavaScript para dibujar en él. Aquí tienes un ejemplo de cómo hacerlo:

Este código crea una página web con un elemento <canvas> donde se dibuja un rectángulo verde, un círculo azul y el texto “Canvas” en negro. El archivo script.js contiene el código JavaScript que se ejecuta cuando se carga la página.

Explicación del Código:

1. HTML: Define un lienzo (<canvas>) con un id específico y dimensiones fijas.
2. JavaScript:
   • Obtener el lienzo: Usa getElementById para obtener el elemento canvas y getContext('2d') para acceder al contexto de dibujo 2D.
   • Dibujar formas: Utiliza métodos como fillRect para dibujar rectángulos y arc para círculos.
   • Estilos: Configura colores y estilos usando propiedades como fillStyle, strokeStyle, y lineWidth.
   • Texto: Añade texto al lienzo con fillText, estableciendo la fuente y el tamaño con font.

Este es un ejemplo básico, pero puedes expandirlo para crear imágenes más complejas y dinámicas utilizando las capacidades de Canvas en JavaScript.