Dúvida quanto ao preenchimento do fundo do canvas.

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

</canvas>

<script>

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

    //Fundo do canvas
    /* pincel.fillStyle = 'lightgrey'
    pincel.fillRect(0, 0, 600, 400) */

    //Maior triângulo
    pincel.fillStyle = 'dark'
    pincel.beginPath()
    pincel.moveTo(50, 50)
    pincel.lineTo(50, 400)
    pincel.lineTo(400, 400)
    pincel.fill()

    //Menor triângulo
    pincel.fillStyle = 'white'
    pincel.beginPath()
    pincel.moveTo(100, 175)
    pincel.lineTo(100, 350)
    pincel.lineTo(275, 350)
    pincel.fill()

</script>

Essa foi a solução que eu cheguei utilizando as medidas de base do exercício. No entanto, eu tentei criei um canvas de 600 x 400 e tentei preencher o fundo para somente depois fazer o esquado, mas não funcionou :/. Se eu decomentar a linha abaixo das variáveis toda a aréa do canvas se torna 'lightgrey', o triângulo maior desaparece e apenas o triângulo menor que fica na tela. Como faço para resolver isso ?