codigo hasta ahora

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

<script> 
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");//pantalla.getContex o que hace es traer todo lo que se realiza en la pizarra y el 2d es en las dimensiones que se va trabajar el diseño.

    pincel.fillStyle = "lightgrey" // propiedad para diseño de color en este caso es gris claro
    pincel.fillRect(0,0,600,400); // funcion desde que punto de la pizarra empezara el diseño en este caso punto 0x 0y

    pincel.fillStyle = "green" // propiedad para diseño de color en este caso es verde 
    pincel.fillRect(0,0,200,400); // funcion desde que punto de la pizarra empezara el diseño en este caso punto 0x 0y pone el verde hasta el 200.


    pincel.fillStyle = "red" // propiedad para diseño de color en este caso es rojo 
    pincel.fillRect(400,0,200,400); // funcion desde que punto de la pizarra empezara el diseño en este caso punto 200x 0y pone el verde hasta el 600.


    pincel.fillStyle = "yellow" // propiedad para diseño de color en este caso es amarillo
    pincel.beginPath();//para iniciar un nuevo camino en el diseño
    pincel.moveTo(300,200); //esta linea es la instruccion para iniciar en el pano 
    pincel.lineTo(200,400);// desta es para crear linea de punto A a punto b en este caso son las coordenadas, 
    pincel.lineTo(400,400);// desta es para crear linea de punto A a punto b en este caso son las coordenadas,
    pincel.fill(); // esta instruccion es para que rellene el espacio de lineas con el color que se habia escrito arriba.


     pincel.fillStyle = "blue" // propiedad para diseño de color en este caso es amarillo
    pincel.beginPath();//para iniciar un nuevo camino en el diseño
    pincel.arc(300,200,50,0,2*3.14);//esta funcion es para crear circunferencias
    pincel.fill(); // esta instruccion es para que rellene el espacio de lineas con el color que se habia escrito arriba.




</script>