firefox 用canvas画饼图，饼图下面被遮住一部分，怎么解决！

<html>
  <head>
  <script type="text/javascript">
  function draw(){ 
var percentArray=new Array();
// percent 
percentArray[0]=0.50;
percentArray[1]=0.25;
percentArray[2]=0.20;
percentArray[3]=0.05;
        var colorArray=new Array();
colorArray[0]="#FA0";
colorArray[1]="#CDF";  
colorArray[2]="#123";
colorArray[3]="#986";     //draw 3 pie
     for(var m=0;m<3;m++){
var div =document.createElement('div');
var canvas = document.createElement('canvas');  canvas.width="300";
canvas.height="240";        div.style.left=150+m*50;
div.style.top=100+m*50; var x          = 115;               // x coordinate
var y          = 110               // y coordinate
var radius     = 100;                    // Arc radius
//alert("Math.PI:"+Math.PI);
if (canvas.getContext){ 

for(var i=0;i<percentArray.length;i++){
var ctx = canvas.getContext('2d');
var startAngle = 0; // Starting point on circle
var endAngle   = 0; // End point on circle
for(var j=0;j<i;j++){
startAngle+=percentArray[j]*Math.PI*2;
}
for(var j=0;j<=i;j++){
endAngle+=percentArray[j]*Math.PI*2;
   }
   if(i==0){
       //ctx.fillStyle =colorArray[i];  
   ctx.beginPath();
   ctx.moveTo(x,y);
   ctx.arc(x,y,radius,0,percentArray[0]*Math.PI*2, false);
   //alert(i+' begin');
   ctx.fillStyle =colorArray[i];   
   ctx.fill();
          
   //alert(i+' end');
   }else{
       //ctx.fillStyle =colorArray[i] ;  
   ctx.beginPath();
   ctx.moveTo(x,y);
   ctx.arc(x,y,radius,startAngle,endAngle, false);
   //alert(i+' begin');
   ctx.fillStyle =colorArray[i];    
   ctx.fill();
  
   //alert(i+' end');
   }
   
  
  }
}
div.appendChild(canvas);
document.body.appendChild(div);
   }
}
  </script>
  <style type="text/css">
   div{
position:absolute;left:100;top:100;width:240;
height:240;background-color:#FFFFFF;border-style:solid;
filter:Alpha(opacity=100);opacity:1;
z-index:20;
   }
  </style>
  </head>
  <body onload="draw();">
  </body>
</html>