hasta ahora entiendo todo pero no entiendo lo de las coordenadas ya que en el curso aparentemente se asume que sabemos como se definen las coordenadas de la pantalla, podría alguien instruirme como javascript usa las coordenadas? o como se establecen las coordenadas y sus valores por ejemplo el indica que para para dibujar un circulo azul el parámetro es: x, y+20, 10, "blue" pero que significa cada cosa? se que x** es en el plano cartesiano igualmente **y pero como sabe el programa cuanto es de x** y cuanto es de **y el interprete solo lo asume? establece un valor standard? o el dibujo siempre inicia en el centro del canvas?
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function dibujarCirculo(x, y, radio, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
}
function dibujarFlor(x,y) {
dibujarCirculo(x, y+20, 10, "blue");
dibujarCirculo(x, y, 10, "red");
dibujarCirculo(x, y-20, 10, "yellow");
dibujarCirculo(x-20, y, 10, "orange");
dibujarCirculo(x+20, y, 10, "black");
}
dibujarFlor(300,200);
</script>
