Duda creeper | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Buenas me pueden expplicar la parte de las coordenadas por q no lo entiendo bien osea no entiendo lo que se pone antes de x e y como usarlo

<canvas width="600" height="400"></canvas> <script> var pantalla = document.querySelector("canvas"); var pincel = pantalla.getContext("2d"); //cabeza pincel.fillStyle = 'darkgreen'; pincel.fillRect(200, 50, 350 ,300); //ojos pincel.fillStyle = 'black'; pincel.fillRect(250, 110, 90, 90); pincel.fillRect(410, 110, 90, 90); //nariz pincel.fillRect(340, 200, 70, 100); //boca pincel.fillRect(300, 240, 40, 110); pincel.fillRect(410, 240, 40, 110); </script>

¡Hola Dante! ¿Cómo estás?

En el código que compartiste, las coordenadas se refieren a las posiciones en las que se dibujarán los rectángulos en el canvas.

En el método fillRect(x, y, width, height) se utilizan cuatro parámetros: x y y representan las coordenadas en las que se dibujará el rectángulo, width es el ancho del rectángulo y height es la altura del rectángulo.

x representa la coordenada horizontal y y representa la coordenada vertical.

En el ejemplo que compartiste, el primer rectángulo verde se dibuja en la posición (200, 50) y tiene un ancho de 350 y una altura de 300. Los siguientes rectángulos se dibujan en diferentes posiciones, utilizando las coordenadas x e y.

Es importante mencionar que el punto de origen del canvas está en la esquina superior izquierda, por lo que las coordenadas (0, 0) representan la esquina superior izquierda del canvas.

Espero que esta explicación te haya ayudado a entender mejor cómo funcionan las coordenadas en el canvas.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!