Draw Line in Canvas in HTML5


<html>
	<head>
		<title>Draw Line in Canvas in HTML5</title>
	</head>
	<body>

		<canvas id="mycanvas" width="300" height="300" style="border: 1px solid black;"></canvas>
		<br>
		<input type="button" value="Draw Line" onclick="drawLine()">

		<script type="text/javascript">

			function drawLine() {
				var mycanvas = document.getElementById('mycanvas');
				var ctx = mycanvas.getContext('2d');
				ctx.moveTo(10, 10);
				ctx.lineTo(100, 100);
				ctx.lineWidth = 5;
				ctx.strokeStyle = 'red';
				ctx.stroke();
			}

		</script>

	</body>
</html>




Open site in browser and display as below: