'Path' de Semáforo de Trânsito para praticar

<meta charset="UTF-8">

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

<script>



       function desenhaQuadrado(x, y, cor) {

              var tela = document.querySelector("canvas")
              var pincel = tela.getContext("2d")

              pincel.fillStyle = cor
              pincel.fillRect(x, y, 50, 50)
              pincel.strokeStyle = "white"
              pincel.strokeRect(x, y, 50, 50)
       }

       desenhaQuadrado(0, 0, "black")
       desenhaQuadrado(0, 50, "black")
       desenhaQuadrado(0, 100, "green")

       desenhaQuadrado(100, 0, "black")
       desenhaQuadrado(100, 50, "yellow")
       desenhaQuadrado(100, 100, "black")

       desenhaQuadrado(200, 0, "red")
       desenhaQuadrado(200, 50, "black")
       desenhaQuadrado(200, 100, "black")




</script>