使用javascript重绘画布

Question

我正在尝试创建一个用户必须选择某些东西的电路板。我需要在执行期间多次重绘电路板

//function to clear board
function clearBoard(){
   for(var i=0;i<32;i++){
     var c = document.getElementById("myCanvas"+(i+1));
     var ctx = c.getContext("2d");
     // remove all classes from canvas
     $("#c").removeClass();
     ctx.clearRect(0, 0, 150, 75);
   } 
 }

执行此功能时，电路板会被清除。但是当我重新绘制画布时，之前的图形再次出现，并且它们与新的图纸重叠

绘制板的功能

function drawBoard(level){
   type = shuffleArray(); // it gives a shuffled array between 1 to 32
   //console.log(type);
   for(var i=0;i<32;i++){
     var c = document.getElementById("myCanvas"+(i+1));
     var ctx = c.getContext("2d");

     if(type[i]%3==0){  // draw a rectangle
         count++; //  increase the count of rectangle
         c.className="rectangle";
         ctx.rect(20, 20, 75, 50);
     }
     else if(type[i]%3==1){ // draw a circle
         c.className="circle";
         ctx.beginPath();
         ctx.arc(50,37,25,0,2*Math.PI);
     }
     else{    // draw a square
          c.className="square";
          ctx.rect(20, 20, 50, 50);
     }

     ctx.stroke();
   }

   alert("level "+(5-level)+" click all rectangles"); 

   var timer = 15*level * 1000;

   setInterval(function(){ alert("time up,try again");   drawBoard(level); }, timer);

}