请帮忙看一下，执行出来为什么纯黑？
<!DOCTYPE html style="height:100%;width:100%">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body style="height:100%;width:100%">
<canvas id="canvas" style="height:100%;width: 100%">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
var circle= {x:1000,y:100, vx:10,vy:5,}
window.onload = function(){
var canvas = document.getElementById('canvas');
//获取浏览器显示屏的宽高
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
RADIUS=150;
//画布大小
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
var context = canvas.getContext("2d");
setInterval(
function(){//每帧的时候做什么
render(context);//
update();
},
50//ms,每隔多久执行function
);
}
function render(context){
context.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
context.save();
context.beginPath();
context.fillStyle="#000";//纯黑背景
context.fillRect(0,0,canvas.width,canvas.height);
context.beginPath();
context.fillStyle="#fff";
context.arc(circle.x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
context.fill();
context.clip();
context.font="bolder 200px sans-serif";
context.fillStyle="red"
context.fillText("canvas",canvas.width*0.3,canvas.height*0.5);
context.restore();
}
function update(){
circle.x += circle.vx;//小球x方向位置
circle.y += circle.vy;
//碰撞检测
if( circle.y <=RADIUS ){//如果小球碰到顶部
circle.y = WINDOW_HEIGHT-RADIUS;
circle.vy = - Math.abs(circle.vy)//y方向速度反向，逐渐减小，
}
if( circle.x >= WINDOW_WIDTH-RADIUS ){//如果小球碰到右
circle.x = WINDOW_HEIGHT-RADIUS;
circle.vx = - Math.abs(circle.vx)//x方向速度反向，逐渐减小，
}
if( circle.y >= WINDOW_HEIGHT-RADIUS ){//如果小球碰到底部
circle.y = WINDOW_HEIGHT-RADIUS;
circle.vy = - Math.abs(circle.vy)//y方向速度反向，逐渐减小，
}
if( circle.x <= RADIUS ){//如果小球碰到左
circle.x = WINDOW_HEIGHT-RADIUS;
circle.vx = - Math.abs(circle.vx)//x方向速度反向，逐渐减小，
}
}
</script>
</body>
</html>
