javascript - 如何在 Canvas 上重绘对象？

Question

我想在 Canvas 上绘制矩形，然后做同样的事情，但用更大的。我的代码是：

var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<10000;i++){
  ctx.beginPath();
  var x = Math.random() * 1000;               
  var y = Math.random() * 1000;               
ctx.fillStyle = "rgb("+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+")";
ctx.fillRect(x,y,10,10);
}

之后，我使用的功能会告诉我完成 drwoing 需要多长时间。接下来是：

for(var i=0;i<10000;i++){
  ctx.beginPath();
  var x              = Math.random() * 1000;               // x coordinate
  var y              = Math.random() * 1000;               // y coordinate
//wypelnianie
ctx.fillStyle = "rgb("+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+","+
Math.floor(Math.random()*256)+")";
//rysowanie
ctx.fillRect(x,y,200,200);
ctx.closePath();
}

这样做是一样的，但矩形更大。数学很好，因为时间很好（我测试了它们），但起初它会从第二个代码中绘制矩形，然后再做一次。它应该首先绘制小矩形，然后绘制更大的矩形。

我做错了什么？？也许它不能在同一张画布上完成？