acho que fica mais prático e reaproveitamos codigo
<h1>Bandeira</h1>
<canvas id="tela" width="800" height="600">
</canvas>
<script type="text/javascript">
function retangulo(ferramenta,x, y, larg, alt, cor) {
ferramenta.fillStyle = cor;
ferramenta.fillRect(x,y,larg,alt);
}
function triRetangulo(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
ferramenta.beginPath();
ferramenta.moveTo(xInicial, yInicial);
ferramenta.lineTo(xInicial + base, yInicial + altura);
ferramenta.lineTo(xInicial, yInicial + altura);
ferramenta.fill();
}
function triangulo(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
ferramenta.beginPath();
ferramenta.moveTo(xInicial, yInicial);
ferramenta.lineTo(xInicial + base / 2, yInicial + altura);
ferramenta.lineTo(xInicial - base / 2, yInicial + altura);
ferramenta.fill();
}
function trianguloInvertido(ferramenta,xInicial,yInicial,base,altura,cor){ferramenta.fillStyle = cor;
ferramenta.beginPath();
ferramenta.moveTo(xInicial, yInicial);
ferramenta.lineTo(xInicial + base / 2, yInicial - altura);
ferramenta.lineTo(xInicial - base / 2, yInicial - altura);
ferramenta.fill();
}
function losangulo(ferramenta,xInicial,yInicial,larg,altura,cor){
triangulo(ferramenta, xInicial ,yInicial ,larg, altura / 2, "yellow")
trianguloInvertido(ferramenta,xInicial,yInicial + altura,larg ,altura / 2,"yellow")
}
function circulo(ferramenta, xInicial, yInicial, raio, cor){
ferramenta.fillStyle = cor;
ferramenta.beginPath();
ferramenta.arc(xInicial, yInicial, raio, 0, 2 * 3.14);
ferramenta.fill();
}
var tela = document.getElementById('tela');
var lapis = tela.getContext('2d');
retangulo(lapis,0,0,500,300,"green");
losangulo(lapis, 230,50,400,200,"magenta");
circulo(lapis,230,150,80,"blue");
</script>