canvas如何画坐标轴

<style>
			*{
            margin: 0;
            padding:0;
			}
			canvas{
				/*background: black;*/
				border: 2px solid #F5F5DC ;
			}
			
		</style>

<canvas id="can" width="800"  height="600" >
			对不起，你的浏览器不支持canvas
		</canvas>

<script>
			let cont=document.getElementById("can").getContext("2d");
			for(let i=0;i<100;i++){
			    cont.beginPath()
			    cont.moveTo(10*i,0);
			    cont.lineTo(10*i,can.height);
				cont.strokeStyle='#F5F5DC'
			    cont.stroke();
			    cont.closePath()
			}
			 
			for(let i=0;i<100;i++){
				cont.beginPath()
				cont.moveTo(0,10*i);
				cont.lineTo(can.width,10*i);
			    cont.strokeStyle='#F5F5DC'
				cont.stroke();
				cont.closePath()
			}
			// x轴
			cont.beginPath();
			cont.moveTo(100,500);
			cont.lineTo(700,500);
			cont.lineTo(690,490);
			cont.moveTo(100,500);
			cont.lineTo(700,500);
			cont.lineTo(690,510);
			cont.strokeStyle="green";
			cont.stroke();
			cont.closePath();
			
			// y轴
			cont.beginPath();
			cont.moveTo(100,500);
			cont.lineTo(100,100);
			cont.lineTo(90,110);
			cont.moveTo(100,500);
			cont.lineTo(100,100);
			cont.lineTo(110,110);
			cont.strokeStyle="green";
			cont.stroke();
			cont.closePath();
						
			// 折线
			cont.beginPath();
			cont.moveTo(100,500);
			cont.lineTo(130,400);
			cont.lineTo(190,440);
			cont.lineTo(210,430);
			cont.lineTo(300,340);
			cont.lineTo(490,430);
			cont.lineTo(600,230);
			cont.strokeStyle="red";
			cont.stroke();
			cont.closePath();	
		</script>