[DUDA] CON COORDENAS DE TRIANGULO

La verdad es que tecnicamente no sabría cual es la respuesta. Pero en mi caso modifique las coordenadas y me funciono, yo en mi caso uso dos archivos por separado tanto el javascrip como el css y los enlazo con mi HTML. Entonces al canvas, le di estas dimenciones : width: 600px; height: 400px; y luego puse estas coordenadas en el Javascrip. Te adjunto imagen (como podras ver son distintas las dimenciones a las que uso el profe).

Hola Ana, ¿cómo estás?

Las coordenadas que se emplean en el comando lineTo son coordenadas absolutas, es decir, emplea posiciones de punto basándose en coordenadas cartesianas.

Así que, tu no debes colocar en el parámetro de lineTo cuántos pixeles o "distancia" le hace falta al punto 'A' para llegar al punto 'B', debes colocar la coordenada en 'x' y 'y' del punto B, que es punto final o la posición a la cual deseas llegar con el comando.

Espero que te pueda ayudar a entender.

Saludos.

¡hola! es mi primera vez escribiendo por aca.

Veran al momento de realizar el ejercicio realicé exacto lo que el maestro Christian había hecho:

<canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "green";
    pincel.fillRect(0,0,200,400);

    pincel.fillStyle = "red";
    pincel.fillRect(400,0,200,400);

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(400,400);
    pincel.lineTo(400,400);
    pincel.fill();

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300,200,50,0,2*3.14);
    pincel.fill();
</script>

Sin embargo al momento de revisarlo el tringuilo amarillo no se dibujaba, por cual me tarde un rato en averiguar que sucedia, lo cual descubri que en la linea 20 debe escribirse 200,400, de lo contrario no lo muestra:

<canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "green";
    pincel.fillRect(0,0,200,400);

    pincel.fillStyle = "red";
    pincel.fillRect(400,0,200,400);

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(400,400);
    pincel.lineTo(200,400);
    pincel.fill();

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300,200,50,0,2*3.14);
    pincel.fill();
</script>

¿a que se debe esta diferencia?