Meu navegador (chrome) só exibe o desenho completo no eixo X, no eixo y o desenho é cortado. Esse desenho da imagem tem 600 x 400, mas só aparece um pedaço do desenho completo. Após desenhar o triângulo e não o ver na tela, mudei as coordenadas para o triângulo aparecer em cima da bandeira e ficou assim. Alguém sabe como resolver isso?
pode disponibilizar o seu código, para ajudarmos mais?
<meta charset="utf-8">
<canvas width = '600' heigth = '400'></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');x
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = 'green';
pincel.fillRect(0, 0, 200, 400);
pincel.fillStyle = 'red';
pincel.fillRect(400, 0, 200, 400);
pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200, 0);
pincel.lineTo(400, 0);
pincel.fill();
</script>Assim ficou meu creeper:
<meta charset="utf-8">
<canvas width = '600' heigth = '400'></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
// cabeça
pincel.fillStyle = 'darkgreen';
pincel.fillRect(200, 50, 350, 300);
//olhos
pincel.fillStyle = 'black';
pincel.fillRect(250, 110 , 90, 90);
pincel.fillRect(410, 110, 90, 90);
//nariz
pincel.fillRect(340, 200, 70, 100);
//boca
pincel.fillRect(300, 240, 40, 110);
pincel.fillRect(410, 240, 40, 110);
</script>