Ekran nie chce się czyścić ---JavaScript canvas

pytanie zadane 5 marca 2017 w JavaScript przez DarthBartek Początkujący (480 p.)

Program robiony na podstawie Coding Math, jak w tytule, ekran nie chcę sie czyścić, obrazy nakładją sie na siebie.

////JAVASCRIPT

window.onload=function(){
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		width=canvas.width=window.innerWidth,
		height=canvas.height=window.innerHeight;
		
	var x1=Math.random()*width,
			y1=Math.random()*height;
	
	context.translate(width/2,height/2);
	context.scale(1,-1);
		
	
	var angleSpeed=1;
	
	var phase=0;
		render();
	
	function render(){
		
		context.clearRect(0, 0, width, height);
		
		line(-width/2,0,width/2,0);
		line(0,height/2,0,-height/2);
		waves(phase);
		phase+=angleSpeed;
		requestAnimationFrame(render);
	}
	
	function line(X1,Y1,X2,Y2){
		context.beginPath();
		context.moveTo(X1,Y1);
		context.lineTo(X2,Y2);
		context.stroke();
		context.closePath();
	}
	function waves(phaseAngle){
		phaseAngle=phaseAngle/180*Math.PI;
		for(var angle =-2.6*Math.PI;angle<2.5*Math.PI;angle+=0.001){
			var x=angle*100;
			var y1=Math.sin(angle)*100;
			var y2=Math.sin(angle+phaseAngle)*100;
			var interference=y2+y1;
			
			context.beginPath();
			context.fillStyle="#00FF00";
			context.fillRect(x,y1,1,1);
			context.closePath();
			
			context.beginPath() ;
			context.fillStyle="#0000FF";
			context.fillRect(x,y2,1,1);
			context.closePath();
		
			context.beginPath() ;
			context.fillStyle="#FF0000";
			context.fillRect(x,interference,1,1);
			context.closePath();
		}
	}
};


/////HTMl
<!DOCTYPE html>
<html>
<head>
	<title>Nooo</title>
	<script type="text/javascript" src="main.js"></script>
	<style type="text/css">
	html, body {
		margin: 0px;
	}
	canvas {
		display: block;
	}
	</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>