Week 12

Task 1
avatar
user_1373341
html
a year ago
1.9 kB
2
Indexable
Never
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Question 1</title>
</head>
<body>
	<p>
		Enter coorddinate for 1st point:&nbsp;&nbsp;X= <input type="text" id="x1st"> Y= <input type="text" id="y1st"><br/>
	</p>
	<p>
		Enter coorddinate for 2nd point: X= <input type="text" id="x2nd"> Y= <input type="text" id="y2nd"><br/>
	</p>
	<p>
		Enter coorddinate for 3rd point:&nbsp;&nbsp;X= <input type="text" id="x3rd"> Y= <input type="text" id="y3rd"><br/><br/>
	</p>

	<canvas id="canvas" width="300" height="150" style="border:3px dashed black;"></canvas><br/><br/>

	<button onclick="triangle()">Draw triangle</button>

	<script type="text/javascript">
		function triangle() {
			var x1st = parseInt(document.getElementById("x1st").value);
			var y1st = parseInt(document.getElementById("y1st").value);
			var x2nd = parseInt(document.getElementById("x2nd").value);
			var y2nd = parseInt(document.getElementById("y2nd").value);
			var x3rd = parseInt(document.getElementById("x3rd").value);
			var y3rd = parseInt(document.getElementById("y3rd").value);
			
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");

			context.beginPath();
			context.moveTo(x1st,y1st);
			context.lineTo(x2nd,y2nd);
			context.lineTo(x3rd,y3rd);
			context.closePath();

			context.strokeStyle = "purple";
			context.lineWidth = "5";
			context.stroke();

			context.fillStyle="#dca4dc";
			context.fill();

			context.strokeStyle = "white";
			context.lineWidth = "2";

			context.beginPath();
			context.moveTo(x1st,y1st);
			context.lineTo((x2nd+x3rd)/2,(y2nd+y3rd)/2);
			context.moveTo(x2nd,y2nd);
			context.lineTo((x1st+x3rd)/2,(y1st+y3rd)/2);
			context.moveTo(x3rd,y3rd);
			context.lineTo((x1st+x2nd)/2,(y1st+y2nd)/2);

			context.stroke();
		}
	</script>
</body>
</html>