<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "green";
c.fillRect(0,0,200,400);
c.fillStyle = "red";
c.fillRect(400, 0, 200, 400);
</script>O código acima é a resolução do exercício. O código abaixo é o meu. Reparem que na função fillRect, que desenha o retângulo vermelho, eu coloco o valor 600 no último parâmetro, porém visualmente não há diferença. Por quê?
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "green";
c.fillRect(0,0,200,400);
c.fillStyle = "red"
c.fillRect(400,0,200,600);
</script>