Lo hecho en aula | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

DOM
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--Dentro de la etiqueta canas podemos crear una pizarra
    para realizar diseños para ello definimos su area-->
    <canvas width="600" height="400"></canvas>
    <script>
        //Seleccionamos nuestro canvas
        var pantalla=document.querySelector('canvas');
        //capturamos nuestro area canvas de area 2d
        var pincel=pantalla.getContext("2d");


        //Dividimos nuestro canvas en cuatro regiones
        //Background area  final
        pincel.fillStyle="black";
        pincel.fillRect(0,0,600,400);

        //Area 1 SUPERIOR izquierdo
        pincel.fillStyle="lightgrey";
        pincel.fillRect(0,0,300,200);//Coordenadas (x0,y0,x1,y1)

        //Area 2 SUPERIOR derecha
        pincel.fillStyle="green";
        pincel.fillRect(300,0,600,200);

        //Area 2 triangulo
        pincel.fillStyle="yellow";
        pincel.beginPath(); //Iniciamos una ruta para el pincel
        pincel.moveTo(300,200); //definimos un punto de referencia(x0,y0)
        pincel.lineTo(200,0); //trazamos una region desde el punto de refencia hasta la posicion de interes (x1=200,y1=0) 
        pincel.lineTo(400,0); //trazamos una region desde el punto de refencia hasta la posicion de interes (x1=400,y1=0) 
        pincel.fill(); //Rellenamos la region 

        //Area 3 circunferencia
        pincel.fillStyle="blue";
        pincel.beginPath(); //Iniciamos una ruta para el pincel
        pincel.arc(100,300,100,0,2*3.14); //Parametros son arc(x0,y0,radio,teta0,tetaFinal);
        pincel.fill();

    </script>
</body>
</html>