<canvas width="800" height="600"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function pintaRetangulo(cor, x, y, largura, altura) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, largura, altura);
}
function pintaTriangulo (cor, ponta1, linha1, ponta2, linha2, ponta3, linha3) {
pincel.fillStyle = cor
pincel.beginPath();
pincel.moveTo(ponta1, linha1);
pincel.lineTo(ponta2, linha2);
pincel.lineTo(ponta3, linha3);
pincel.fill();
}
pintaRetangulo('darkgreen', 25, 25, 750, 550);
pintaTriangulo('yellow', 100, 275,400,100,700,275);
pintaTriangulo('yellow', 100, 275, 700,275, 400, 500);
pincel.fillStyle = 'darkblue';
pincel.beginPath();
pincel.arc(400, 290, 120, 0, 2*6.22);
pincel.fill();
</script>