为什么这里的clearRect要放在第一行？

Question

var dom = document.getElementById("clock");

     var ctx = dom.getContext("2d");     var width = ctx.canvas.width; 
     var height = ctx.canvas.height;     var r = width / 2;

function drawBackground(){

           **ctx.save();**
           .......省略一些代码
           }

function drawHour(hour,minute){

.......省略一些代码

}
function drawMinute(minute,second){

.......省略一些代码

}
function drawSecond(second){

  .......省略一些代码
          }

function drawDot(){
.......省略一些代码
}

        function draw(){
         **ctx.clearRect(0,0,width,height);**
         var time = new Date(),             hour = time.getHours(),            
          minute = time.getMinutes(),             second = time.getSeconds();
     drawBackground();
     drawHour(hour,minute);
     drawMinute(minute,second);
     drawSecond(second);
     drawDot();
     **ctx.restore();**
     }
     draw();
     setInterval(draw,1000);

为什么ctx.clearRect(0,0,width,height)要放在draw()函数第一行？
那不是一调用就被清除了？那还怎么画？

Answer 1

不清除掉原来canvas中的内容，那之前所有draw出来的东西的痕迹不都还在么。