<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<h1>Calc</h1>
<p>Side A: <input type="text" id="a" /></p>
<br />
<p>Side B: <input type="text" id="b" /></p>
<br />
<p>c: <input type="text" id="c" /></p>
<br />
<button type="button" onclick="Calculate()">Calculate</button>
<br />
<p>value: <span id="output"></span></p>
<script>
var output = document.getElementById("output");
var a, b, c;
function Calculate() {
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");
a = parseFloat(document.getElementById("a").value);
b = parseFloat(document.getElementById("b").value);
c = parseFloat(document.getElementById("c").value);
var output = document.getElementById("output");
if (Number.isNaN(a) && !Number.isNaN(b) && !Number.isNaN(c)) {
const a = Math.sqrt(c ** 2 - b ** 2);
output.textContent = " " + a;
}
if (Number.isNaN(b) && !Number.isNaN(a) && !Number.isNaN(c)) {
const b = Math.sqrt(c ** 2 - a ** 2);
output.textContent = " " + b;
}
if (Number.isNaN(c) && !Number.isNaN(a) && !Number.isNaN(b)) {
const c = Math.sqrt(a ** 2 + b ** 2);
output.textContent = " " + c;
}
console.log(a, b, typeof output.textContent, "valuesssssss");
context.beginPath();
context.moveTo(100, a);
context.lineTo(a, b);
context.lineTo(b, output.textContent);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "#000";
context.stroke();
// the fill color
context.fillStyle = "#ddd";
context.fill();
console.log("value", output.textContent);
console.log(output, "outpt");
return output.textContent;
}
</script>
</body>
</html>I was trying from the couple of weeks , I am unable to draw labels on each side of triangle , I have two input fields where I pass values of a and b from where I calculate c and then at the end the hypotenuse then by using canvas I generate that triangle, now I want to labeling the sides like a , b ,c is is possible let me know please. I am using Pythagoras theorem canvas java script
Below is a very simple example that draws text and a shape, you can use that as a starting point and build what you need, in my example I'm drawing a multiple shapes to show that you can draw things other than just a triangle, all that is needed are the coordinates, getting those coordinates is just math question, you already have that figured out.
The issues I think you might face is on the placement of the text, as you can see I'm drawing the text right on top of the same given coordinate, but you can adjust that to suit your needs.