Minha resolução | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<!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>Qual é a fração</title>
</head>
<body>
    <p><b>Qual é a fração</b></p>
    <canvas width="600" height="400"></canvas>
</body>
</html>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    function desenhaQuadradoVerde(x, y, color) {
        pincel.fillStyle = color
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeRect(x, y, 50, 50);
    }

    function desenhaRetanguloVerde(x, color) {
        desenhaQuadradoVerde(x, 10, 'green');
        desenhaQuadradoVerde(x + 50, 10);
        desenhaQuadradoVerde(x + 100, 10);
        desenhaQuadradoVerde(x + 150, 10, 'white');
    }

    desenhaRetanguloVerde(0);

</script>