Подскажите пожалуйста
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300" style="outline:1px solid #d3d3d3;">
<script>
window.onload = function()
{
var Mcanvas = document.getElementById("canvas").getContext("2d");
var m = 0;
Mcanvas.clearRect(0,0,300,300)
Mcanvas.lineStyle = "#109bfc";
Mcanvas.lineWidth = 1;
Mcanvas.beginPath();
Mcanvas.moveTo(0,0);
var SI = setInterval(function()
{
m++
switch(m){
case 1: Mcanvas.lineTo(0,100); break;
case 2: Mcanvas.lineTo(100,100); break;
case 3: Mcanvas.lineTo(100,0); break;
case 4: Mcanvas.lineTo(0,0); break;
}
Mcanvas.stroke();
if(m == 5)
{
clearInterval(SI);
Mcanvas.fillStyle = "rgb(78, 193, 243)";
Mcanvas.fill();
Mcanvas.beginPath();
Mcanvas.moveTo(100,100);
var SI2 = setInterval(function()
{
m++
switch(m){
case 6: Mcanvas.lineTo(100,200); break;
case 7: Mcanvas.lineTo(200,200); break;
case 8: Mcanvas.lineTo(200,100); break;
case 9: Mcanvas.lineTo(100,100); break;
}
Mcanvas.stroke();
if(m == 10)
{
clearInterval(SI2);
Mcanvas.fillStyle = "rgb(78, 193, 243)";
Mcanvas.fill();
}
},1000);
}
},1000);
}
</script>
</body>
</html>
Сейчас квадраты рисуются друг за другом, а надо сразу оба