绘制canvas气泡出现了问题，求大神帮忙

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas气泡</title>
</head>
<style>
* {  
        margin: 0;  
        padding: 0;  
    }  
    html,body{  
        height:100%;  
        width:100%;  
    }  
    canvas{  
        display:block; 
        background-color: #000; 
    } 
</style>
<body>
<canvas id="myCanvas" width="" height="">你的浏览器不支持canvas！</canvas>
</body>
<script>
var myCanvas=document.getElementById('myCanvas');
myCanvas.width=window.innerWidth;
myCanvas.height=window.innerHeight; var context=myCanvas.getContext('2d');
var colors=['#EFA3A3','#F570CE','#7B58DF','#67CBED','#64E483','#F1F648','#F08354'];
var balls=[];
var timer;

/*随机数*/
function random(min,max){
return Math.round(Math.random()*(max-min)+min);
}
/*
一个圆 var ball={
x:x轴的位置，
y:y轴的位置，
r:圆的半径，
vx:x轴的速度，
vy:y轴的速度，
color:颜色
}
*/
var on=true;
myCanvas.onmousemove=function(event){
/*onmousemove创建两个圆*/
for (var i = 0; i < 2; i++) {
var ball={
x:random(-5,5)+event.clientX,
y:random(-5,5)+event.clientY,
r:random(10,45),
vx:Math.random()-0.5,
vy:Math.random()-0.5,
color:colors[random(0,colors.length-1)]
};
balls.push(ball);
if (balls.length>300) {
balls.shift();
}
}
drawBall();
if (on=true) {
clearInterval(timer);
timer=setInterval(drawBall,30);
on=false;
}
};
/*画圆*/
function draw(ball){
context.beginPath();
context.arc(ball.x,ball.y,ball.r,0,2*Math.PI,false);
context.fillStyle=ball.color;
context.globalCompositeOperation='lighter';
context.fill(); 
}
function drawBall(){
context.clearRect(0,0,myCanvas.width,myCanvas.height);
for (var i = 0; i < balls.length; i++) {
balls[i].x+=balls[i].vx*8;
balls[i].y+=balls[i].vy*8;
balls[i].r=balls[i].r*0.94;
balls[i].index=i;
//console.log(1); if (balls[i].r<1) {
balls.splice(balls[i].index,1);
continue;
}
draw(balls[i]);
if (!balls.length) {
clearInterval(timer);
on=true;
}
} }
代码89行加不加 console.log(1);  效果差距较大，加上才能达到我想要的效果，为什么这样？求解答！