Comentarios en Código - Uso de Canvas

Cada uno lleva a cabo las practicas que desea para recordar lo visto en clase, en mi caso agrego comentarios al código para recordar fácilmente que hacen cada una de las líneas, esto para reforzar lo aprendido.

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


<script>
    var pantalla = document.querySelector("canvas");    //    Conectamos la etiqueta HTML <canvas> con nuestro código mediante "querySelector".
    var pincel = pantalla.getContext("2d");             //    La variable "pincel" será la encargada de dibujar-graficar en el canvas.

    pincel.fillStyle = "lightgray";    // Es una propiedad para definir color.
    pincel.fillRect(0,0,600,400);    // Es una función "rectangular".

    pincel.fillStyle = "green";
    pincel.fillRect(0,0,200,400);    // Con 200 y 400 se define el área a pintar.

    pincel.fillStyle = "red";
    pincel.fillRect(400,0,200,400);    // El punto de inicio cambia a 400 en el eje horizontal y se mantiene en 0 en eje vertical.

    pincel.fillStyle = "yellow";
    pincel.beginPath();                // Función definida para comenzar un nuevo camino a través del canvas.
    pincel.moveTo(300,200);            // Movemos el punto de inicio a la posición coordenada.
    pincel.lineTo(200,400);            // Creamos una línea después de mover el punto de inicio a 300x,200y, que se dibuje hacia 200x,400y.
    pincel.lineTo(400,400);            // Creamos otra línea después de mover el punto de inicio a 300x,200y, que se dibuje hacia 400x,400y.
    pincel.fill();                    // Ahora con esta función rellenar el grafico creado arriba con la propiedad del color "amarillo".    

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300,200,50,0,2*3.14);    // Con la función "arc" graficamos la circunferencia, dándole primero un punto inicial 300x,200y, 50px de radio, ángulo inicial de 0 grados y ángulo final.
    pincel.fill();

</script>