<!DOCTYPE html>
    <html lang="es">
    <head>
       <style>
        canvas{
            background: rgb(55,66,99);
            background-image: url("fondoNumeros.png");   
        }
       </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <button onclick="pintar()">Ejecutar</button>
        <script>
            let cv = document.getElementById("canvas");
            cv.width = 1000;
            cv.height = 600;
            let cx = cv.getContext("2d");
            function pintar(){
                //cuadro 1
                cx.beginPath();
                cx.strokeStyle="rgb(215,200,200)";
                cx.lineWidth = 4;
                cx.moveTo(100,100);
                cx.lineTo(200,100);
                cx.lineTo(200,200);
                cx.lineTo(100,200);
                cx.lineTo(100,100);
                cx.stroke();
                cx.fillStyle = "rgb(155,200,150)";
                cx.fill();
                //cuadro 2
                cx.beginPath();
                cx.strokeStyle="rgb(15,200,200)";
                cx.lineWidth = 4;
                cx.moveTo(400,300);
                cx.lineTo(500,300);
                cx.lineTo(500,400);
                cx.lineTo(400,400);
                cx.lineTo(400,300);
                cx.stroke();
                cx.fillStyle = "rgb(55,200,150)";
                cx.fill();
            }
        </script>
    </body>
    </html>