求助，什么都不显示，不明白。

照实例做的，本要制作一时钟。但浏览出来空白。
<html>
<head>
 <title>Canvas Clock Demo</title>
 <script>
        window.onload = function() {
  clock();
setInterval(clock,1000);
}; 
function clock() {
    var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr=hr>= 12 ? hr-12 : hr;
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "blace";
  ctx.lineWidth = 8;
  ctx.linecap = "round";
  ctx.save();
      ctx.beginPath();
      for(var i=0;i<12;i++) {
      ctx.rotate(Math.PI/6);
  ctx.moveTo(100,0);
  ctx.lineTo(120,0);
  ctx.stroke();
  ctx.restore();
  ctx.save();
     ctx.lineWidth=5;
 beginPath();
  for(var i=0;i<60;i++) {
    if(i%5!=0){
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.rotate(Math.PI/30);
  ctx.stroke();
  ctx.restore();
  ctx.save();
      ctx.rotate( (Math.PI/6) * hr +
              (Math.PI/360) * min +
              (Math.PI/21600)*sec);
  ctx.lineWidth=14;
  ctx.beginPath();
     ctx.moveTo(-20.0);
 ctx.lineTo(80.0);
 ctx.stroke();
      ctx.restore();
  ctx.save();
  ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec);
    ctx.lineWidth=10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineWidth(112,0);
ctx.stroke();
     ctx.restore();
 ctx.save();
 ctx.rotate(sce * Math.PI/30);
 ctx.strokeStyle="#d40000";
 ctx.fillStyle="#d40000";
 ctx.lineWidth=6;
 ctx.beginPath();
   ctx.moveTo(-30,0);
   ctx.lineTo(83,0);
 ctx.stroke();
 ctx.restore();
 ctx.save();
 ctx.lineWidth=14;
 ctx.strokeStyle="#325fa2";
 ctx.beginPaht();
 ctx.arc(0,0,142,0,Math.PI*2,true);
 ctx.stroke();
 ctx.restore();
 ctx.restore();
}
</script>
    </head>
    <body>
       <canvas id="canvas" height="150" width="150"></canvas>
    </body>                      
</html>