API Canvas

Métodos de la API Canvas utilizados

La API Canvas sirve para dibujar gráficos 2D en el navegador a través de un contexto de dibujo obtenido con getContext('2d'). El canvas es una cuadrícula donde el punto 0,0 está en la esquina superior izquierda, x crece hacia la derecha e y crece hacia abajo. Para saber las coordenadas o se usa una aplicación como Figma para diseñar primero y luego leer las coordenadas o la alternativa de prueba y error usando un boceto en papel teniendo en cuenta como se comporta el canvas, creo que esta es la parte más difícil de la práctica.
Los métodos utilizados son los siguientes:

Lienzo 1 — Dibujo

• createLinearGradient(x1,y1, x2,y2) y addColorStop(posición, color) — se usan para el cielo y dar degradado para dar más sensación de profundidad que la que da un color plano.
• fillStyle y fillRect(x, y, ancho, alto) — el método para rellenar áreas rectangulares (cielo, suelo, paredes de la casa, ventanas y puerta).
• beginPath(), moveTo(x, y), lineTo(x, y), closePath() y fill() — Para construir las montañas y el tejado, que son triángulos. Primero setraza el contorno punto a punto y después se rellena.
• arc(x, y, radio, inicio, fin) — se usa para el sol y la copa del árbol, ya que genera círculos o arcos sin necesidad de trazar punto a punto.
• shadowColor y shadowBlur — se añaden al sol para simular el resplandor luminoso; se aíslan con save() / restore() para que no afecten al resto de figuras.
• save() / restore() — permiten aplicar estilos temporales (sombras, colores) a una figura concreta sin alterar el estado global del lienzo.

Lienzo 2 — Texto

• font, textAlign, textBaseline — controlan el aspecto y la posición del texto, con la misma sintaxis que CSS.
• fillText(texto, x, y) — dibuja texto sólido; se usa para el título y el nombre del autor.
• strokeText(texto, x, y) — dibuja solo el contorno del texto; permite mostrar una variante visual diferente con el mismo contenido.
• shadowColor y shadowBlur — se aplican al título para darle más presencia visual.