graph.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Graph</title>
</head>
<body style="display: flex;flex-direction:column;align-items: center;">
	<canvas width="1000px" height="1000px" id="can"></canvas>
	<button onClick = "clean ()" style="width: 100px;height:50px;position: fixed;top: 0;left:0;">Clear</button>
	<input type="text" id="in">
	<input type="submit" id="btn">
	<script>
		var canvas = document.getElementById("can"), 
	        ctx = canvas.getContext("2d");
	    ctx.strokeStyle = "black";
	    ctx.beginPath();
		ctx.moveTo(0,500);
	    ctx.lineTo(1000,500);
	    ctx.moveTo(500,0);
	    ctx.lineTo(500,1000);
	    ctx.stroke();
	    ctx.closePath();
	   
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			function drawGraph(f){
				
	             ctx.strokeStyle = "red";
	            
				var formula = f.split('=')[1];
				formula = formula.split('');
				for(let i = 0;i<formula.length;i++){
					if(formula[i] == '+')formula[i] = '-';
					else if(formula[i] == '-')formula[i] = '+';
					
				}				
				formula = formula.join('');
				ctx.beginPath();
				for(let x = -500;x<500;x++){

					var y = eval(formula);
					var x1 = x + 500;
					var y1 = -y + 500;
					
					
					console.log(x,y);
					if(x == -500){
						ctx.moveTo(x1,y1);
						continue;
					}
					
					ctx.lineTo(x1,y1);					
	            	
	            	
				}
				ctx.stroke();
				ctx.closePath();
		}
		var t = document.getElementById('in').value;
		drawGraph(t);
		};
		function clean(){
			console.log('cleaned');
			canvas.width = canvas.width;
			ctx.strokeStyle = "black";
	    	ctx.beginPath();
			ctx.moveTo(0,500);
		    ctx.lineTo(1000,500);
		    ctx.moveTo(500,0);
		    ctx.lineTo(500,1000);
		    ctx.stroke();
		    ctx.closePath();
		}
	</script>
</body>
</html>