<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext ("2d");
//retangulo verde
pincel.fillStyle = 'green';
pincel.fillRect (0,0,600,400);
//triangulo superior
pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo (300,20);
pincel.lineTo(20,200);
pincel.lineTo (580,200);
pincel.fill();
//triangulo inferior
pincel.beginPath();
pincel.moveTo(300,380);
pincel.lineTo(20,200);
pincel.lineTo(580,200);
pincel.fill();
//circulo
pincel.beginPath();
pincel.fillStyle = 'darkblue';
pincel.arc(300, 200, 100, 0, 2*3.14);
pincel.fill();
</script>
