Duvidas

Bom dia, eu tentei fazer uma casinha com uma ávore, algo bem simples, mas fiz o codigo dessa forma.

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


<script>

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


    pincel.fillStyle = 'orange'; // casa
    pincel.fillRect(100, 250, 100, 200);
    pincel.fillStroke = 'black';
    pincel.strokeRect(100, 250, 100, 200);
    pincel.fill();


    pincel.fillStyle = 'black'; // janela
    pincel.fillRect(150, 280, 30, 30);

    pincel.fillStyle = 'red'; // porta
    pincel.fillRect(120, 350, 30, 60);
    pincel.fillStroke = 'black';
    pincel.strokeRect(120, 350, 30, 60);

    pincel.fillStyle = 'brown'; // tronco da arvore
    pincel.fillRect(300, 300, 30, 200);
    pincel.fillStroke = 'black';
    pincel.strokeRect(300, 300, 30, 200);

    pincel.fillStyle = "blue"; // arvore
    pincel.beginPath();
    pincel.arc(315, 270, 50, 0, 2 * 3.14);
    pincel.fill();


    // triangulo
    pincel.fillStyle = 'red';
    pincel.beginPath();
    pincel.moveTo(150, 200); 
    pincel.lineTo(100, 250); 
    pincel.lineTo(200, 250); // com essas coordenadas consigo mudar o triangulo de lugar
    pincel.fill(); 


</script>

Mas queria tentar fazer de outra maneira com a 'function', mas nao consegui fazer o triangulo e nem a bola. Alguem poderia me ajudar em como eu conseguiria continuar esse código de baixo. E tambem nao sei por contorno na bolinha e nem no triangulo.

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


<script>

    function desenhaCasa(x, y, tamanho, tamanho2, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho2, cor);
        pincel.fill()
    }


        desenhaCasa(100, 250, 100, 200, 'orange'); // 100 = largura do quadrado
        desenhaCasa(150, 280, 30, 30, 'black');
        desenhaCasa(120, 350, 30, 60, 'red');
        desenhaCasa(300, 300, 30, 200);





</script>