Buenos días. Comparto mi código.
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey"; //fillStyle es una propiedad
pincel.fillRect(0,0,600,400); //fillRect es una función
pincel.fillStyle = "green"; //fillStyle es una propiedad
pincel.fillRect(0,0,200,400); //fillRect es una función
pincel.fillStyle = "red"; //fillStyle es una propiedad
pincel.fillRect(400,0,200,400); //fillRect es una función
pincel.fillStyle = "yellow"; //fillStyle es una propiedad
pincel.beginPath(); //Comenzar un nuevo camino
pincel.moveTo(300,200); // se mueve al centro del rectángulo
pincel.lineTo(200,400); // dibuja una línea al punto x= 200, y= 400
pincel.lineTo(400,400); // dibuja una línea al punto x= 400, y= 400
pincel.fill(); // llena el gráfico con el color definido, en este caso yellow
pincel.fillStyle = "blue"; //fillStyle es una propiedad
pincel.beginPath(); //Comenzar un nuevo camino
pincel.arc(300,200,50,0,2*3.14); // Se mueve al centro con x= 300, y=200 tamaño en radio 50, ángulo inicial 0, angulo final 2 veces PI
pincel.fill();
</script>Saludos.
