Hi, I have recently been working on plotting function graphs in javascript, but the main problem was the line was exceeding the graph. I found by reading some tutorials online that it can easily be used by using clip(). However when I used clip, the line now falls too short. I have checked and proof read multiple times and I am stumped. Many thanks for any help. -Excuse the poorly written code-

Code:
<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8" />
	<style>
		canvas
		{
			display: block;
			margin: 0 auto;
		}
	</style>
</head>

<body>
	<canvas width="650" height="650" id="canvas">
	</canvas>
	<script>
		var c = document.getElementById("canvas");
		var ctx = c.getContext("2d");
		ctx.moveTo(50,50);
		ctx.lineTo(50,550);
		ctx.lineTo(550,550);
		ctx.stroke();
		
		for(i=0;i<=10;i++)
		{
			ctx.moveTo(50,i*50+50);
			ctx.lineTo(40,i*50+50);
			ctx.fillText(i,28,500-i*50+53);
			
			ctx.moveTo(i*50+50,550);
			ctx.lineTo(i*50+50,560);
			ctx.fillText(i,i*50+47,570);
			
			ctx.stroke();
		}

		ctx.moveTo(50,550);
		var grad = 2;
		var intercept = 1;
		function y(x)
		{
			return grad*x+intercept;
		}
		ctx.fillStyle = "#FFF";
		ctx.fillRect(50,50,500,500);
		ctx.stroke();
		ctx.clip();
		for(i=0;i<=500;i++)
		{
			ctx.lineTo((50+i),550-(y(i)));
		}
		ctx.stroke();
	</script>
</body>

</html>