canvas 畫的線無法清除的問題

js 代碼如下：

    var canvas = document.createElement("canvas");
    canvas.width = 400;
    canvas.height = 400;
    document.body.appendChild(canvas);

    var context = canvas.getContext("2d");

    var x = 20,y = 20;
    var interval = setInterval(function () {

      if(x > 240){
        clearInterval(interval);
      }

      x += 10;
      y += 10;

      context.clearRect(1,1,300,300);
      //canvas.width = canvas.width;

      context.rect(x,y,100,100);
      context.stroke();

    },1000);

 運行結果如下：

 

 發現  context.clearRect(0,0,400,400); 這行代碼並不能清除之前畫出來的線。

而用 canvas.width = canvas.width; 這行代碼就可以清除，暫時還不清除什么原因。