What not are 3 square?

Question

<canvas id="canvas 1" width=200 height=200></canvas><script>
var c=document.getElementById ("canvas 1");
var ctx=c .getContext("2d"); ctx.fillRect
(20,20,100,100,)</script>

<canvas id="canvas1" width="200" height="200">
</canvas>
<script> var c=document.getElementById("canvas1"); var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>

<canvas id="canvas1" width="200" height="200">
</canvas>
<script> var c=document.getElementById("canvas1"); var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>

Answer 1

because you use twice the id value of "canvas1" (the first id "canvas 1" is different) and so, when you try to access the third canvas you target the first element with id "canvas1" wich is the second canvas where you already have fill a square ^^