# How to draw the three triangle in single page using canvas?

``````function areaval() {
var equation = \$('#number').val();
var secod = \$('#acure').val();
var thrd = \$('#pmet').val();
var frd = \$('#cmet').val();
var a = Math.abs(parseInt(equation * secod) );
var d = Math.abs(a/2);
document.getElementById("result").innerHTML = "Area=(1/2)*b*h<br><br>A="+d+"cm2";
document.getElementById("step4.1").innerHTML = "step1=(1/2)*"+equation+"*"+secod;
var f= Math.abs(parseInt(equation) + parseInt(thrd) + parseInt(frd));
document.getElementById("result2.2").innerHTML = "Perimeter=a+b+c<br><br>P="+f+"cm2";
document.getElementById("step4.6").innerHTML = "step2="+equation+"+"+thrd+"+"+frd;
\$('input').val('');
return false;
}

function rightang() {
var givenone = \$('#oppsite').val();
var giventwo = \$('#adjacent').val();
var giventhree = \$('#hyper').val();
var givenhig = \$('#hidgt').val();
var agive = Math.abs(parseInt(givenone * givenhig) );
var ragive = Math.abs((agive)/2);
document.getElementById("raitresult").innerHTML = "Area=(1/2)*b*h<br><br>A="+ragive+"cm2";
document.getElementById("step5.1").innerHTML = "step1=(1/2)*"+givenone+"*"+givenhig;
var subperi = Math.abs((2*givenone)+(2*giventwo));
var rtsub = Math.sqrt(subperi);
var srtadd = Math.floor(parseInt(givenone)+parseInt(giventwo));
var finres = Math.floor(parseInt(rtsub)+parseInt(srtadd));
document.getElementById("periresult2").innerHTML = "Perimeter=a+b+c<br><br>P="+finres+"cm2";
document.getElementById("step5.5").innerHTML = "step2="+givenone+"+"+giventwo+"+"+giventhree;
var hysid = Math.floor(parseInt(finres)/parseInt(giventwo));
var hyang = Math.abs(2*parseInt(hysid));
document.getElementById("periresult3").innerHTML = "Angle of a=A*2/b<br><br>angle="+hyang+"degree";
document.getElementById("step5.8").innerHTML = "step3="+hysid+"*"+"2"+"/"+givenone;
\$('input').val('');
return false;
}

function obtuseang() {
var oppavall = \$('#oppsite6').val();
var oppbval = \$('#oppsite7').val();
var obtont = \$('#oppsite1').val();
var obttwo = \$('#oppsite2').val();
var obttriagle = Math.abs(parseInt(obtont * obttwo ) );
var obtval = Math.abs((obttriagle)/2);
document.getElementById("raitresult43").innerHTML = "Area=(1/2)*b*h<br><br>A="+obtval+"cm2";
document.getElementById("step6.1").innerHTML = "step1=(1/2)*"+obtont+"*"+obttwo;
var obtperi = Math.abs(parseInt(oppavall)+parseInt(oppbval)+parseInt(obtont));
document.getElementById("obtuseresult").innerHTML = "Perimeter=a+b+c<br><br>P="+obtperi+"cm2";
document.getElementById("stepfine").innerHTML = "step2="+oppavall+"+"+oppbval+"+"+obtont;
\$('input').val('');
return false;
}``````
``````#equilateral-try {
width: 0;
height: 0;
border-left: 128px solid transparent;
border-right: 48px solid transparent;
border-bottom: 95px solid black;
position:absolute;
top:100px;
left:100px;
}

#coverbox {
position:absolute;
top:calc(8%);
left:calc(3%);
width:300px;
height:500px;
}

#equilateral-try:after {
width: 100%;
height: 100%;
border-left: 110px solid transparent;
border-right: 40px solid transparent;
content: "";
border-bottom: 80px solid #fff;
position:absolute;
top:10px;
left:-110px;
z-index:1;
}

#strightline {
position:absolute;
left:66%;
top:22%;
z-index:2;
}

#right-try {
width: 0;
height: 0;
border-bottom: 100px solid black;
border-right: 100px solid transparent;
position:absolute;
top:16%;
left:45%;
}

#coverbox11 {
position:absolute;
top:calc(8% );
left:calc(30% );
width:300px;
height:500px;
}

#right-try:after {
width: 100%;
height: 100%;
content: "";
border-bottom: 85px solid #fff;
border-right: 85px solid transparent;
position:absolute;
top:12px;
left:6px;
z-index:6;
}

#obtuse-try {
width: 0;
height: 0;
border-bottom: 100px solid black;
border-left: 140px solid transparent;
position:absolute;
top:17%;
left:20%;
}

#coverbox12 {
position:absolute;
top:calc(8% );
left:calc(65% );
width:300px;
height:500px;
}

#obtuse-try:after {
width: 100%;
height: 100%;
content: "";
border-bottom: 80px solid #fff;
border-left: 120px solid transparent;
position:absolute;
top:14px;
left:-125px;
z-index:8;
}

#strightline3 {
position:absolute;
left:68.8%;
top:16%;
z-index:9;
}``````
``````<html>
<head>
<script src="angleoftriangle.js"></script>
<link rel="stylesheet" type="text/css" href="angleoftriangle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div id="coverbox">
<div id="equilateral-try">
</div>
<form id="text" onsubmit="return areaval()">
<p id="heading1"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Acute Triangle</p>
<p id="heading5"style="position:absolute;top:42%;left:20%;font-size:20px;color:black;">abc<90deg.</p>
<input type="text" value ="" id="number" style="position:absolute;width:8%;height:4%;left:60%;top:40%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="acure" style="position:absolute;width:8%;height:4%;left:78%;top:31%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="pmet" style="position:absolute;width:8%;height:4%;left:42%;top:25%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="a"required>
<input type="text" value ="" id="cmet" style="position:absolute;width:8%;height:4%;left:88%;top:25%;outline:none;border:none;font-size:25px;z-index:5;background-color:transparent;" placeholder="c"required>
<button style="position:absolute;height:20px;left:70%;top:41%;">sol</button>
</form>
<div id="result"style="position:absolute;top:55%;left:20%;font-size:20px;color:#878787;"></div>
<div id="step4.1"style="position:absolute;top:60%;left:20%;font-size:20px;color:#878787;"></div>
<div id="result2.2"style="position:absolute;top:68%;left:20%;font-size:20px;color:#878787;"></div>
<div id="step4.6"style="position:absolute;top:73%;left:20%;font-size:20px;color:#878787;"></div>
<svg height="16%" width="14%"id="strightline">
<line x1="30" y1="0" x2="30" y2="105" style="stroke:black;stroke-width:2" />
</svg>
</div>

<div id="coverbox11">
<div id="right-try">
</div>
<form id="text1" onsubmit="return rightang()">
<p id="heading1"style="position:absolute;top:7%;left:32%;font-size:22px;color:black;">Rightangle Triangle</p>
<p id="heading5"style="position:absolute;top:42%;left:43%;font-size:20px;color:black;"> a=90degree.</p>
<input type="text" value ="" id="oppsite" style="position:absolute;width:8%;height:4%;left:38%;top:23%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="a"required>
<input type="text" value ="" id="hidgt" style="position:absolute;width:8%;height:4%;left:48%;top:23%;outline:none;border:none;font-size:25px;z-index:20;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="adjacent" style="position:absolute;width:8%;height:4%;left:53%;top:37%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="hyper" style="position:absolute;width:8%;height:4%;left:68%;top:23%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="c"required>
<button style="position:absolute;height:20px;left:64%;top:38%;">sol</button>
</form>
<div id="raitresult"style="position:absolute;top:55%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.1"style="position:absolute;top:60%;left:43%;font-size:20px;color:#878787;"></div>
<div id="periresult2"style="position:absolute;top:70%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.5"style="position:absolute;top:75%;left:43%;font-size:20px;color:#878787;"></div>
<div id="periresult3"style="position:absolute;top:85%;left:43%;font-size:20px;color:#878787;"></div>
<div id="step5.8"style="position:absolute;top:90%;left:43%;font-size:20px;color:#878787;"></div>
</div>

<div id="coverbox12">
<div id="obtuse-try">
</div>
<svg height="15%" width="15%"id="strightline3">
<path id="lineAB" d="M 100 150 l 70 -200" stroke="black" stroke-width="2" fill="none" />
</svg>
<form id="text2" onsubmit="return obtuseang()">
<p id="heading16"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Obtuse Triangle</p>
<p id="heading17"style="position:absolute;top:42%;left:30%;font-size:20px;color:black;">a>90degree.</p>
<input type="text" value ="" id="oppsite1" style="position:absolute;width:8%;height:4%;left:48%;top:38%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
<input type="text" value ="" id="oppsite2" style="position:absolute;width:8%;height:4%;left:58%;top:28%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="h"required>
<input type="text" value ="" id="oppsite6" style="position:absolute;width:8%;height:4%;left:71%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="c"required>
<input type="text" value ="" id="oppsite7" style="position:absolute;width:8%;height:4%;left:36%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="a"required>
<button style="position:absolute;height:20px;left:58%;top:39%;">sol</button>
</form>
<div id="raitresult43"style="position:absolute;top:55%;left:30%;font-size:20px;color:#878787;"></div>
<div id="step6.1"style="position:absolute;top:60%;left:30%;font-size:20px;color:#878787;"></div>
<div id="obtuseresult"style="position:absolute;top:70%;left:30%;font-size:20px;color:#878787;"></div>
<div id="stepfine"style="position:absolute;top:75%;left:30%;font-size:20px;color:#878787;"></div>
</div>

<p id="heading19"style="position:absolute;top:-1%;left:30%;font-size:28px;color:blue;">Different types of triangle in angle method.</p>
</body>
</html>``````

I have some code in triangle shape calculator that generates CSS code used to draw the triangle shape. But I want to draw the different shapes in the triangle using canvas method. How can I change the programming code in CSS to canvas?

## Answers:

``````function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}``````
``````<html>
<body onload="draw();">
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>``````

You can reffer following artice-Drawing shapes in canvas.

`

``````<!DOCTYPE html>
<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(200, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();

// the outline
context.lineWidth = 10;
context.strokeStyle = '#666666';
context.stroke();

// the fill color
context.fillStyle = "#FFCC00";
context.fill();
</script>
</body>
</html>``````

`Try this

Html :

``````<!DOCTYPE html>
<html>
<head>
<title>Triangle Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>

</body>
</html>
``````

javascript :

``````    var canvasElement = document.querySelector("#myCanvas");
var context = canvasElement.getContext("2d");

// the triangle
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();

// the outline
context.lineWidth = 10;
context.strokeStyle = '#666666';
context.stroke();

// the fill color
context.fillStyle = "#FFCC00";
context.fill();
``````

``````<!DOCTYPE HTML>
<html>
<head>

<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>

<script type="text/javascript">
function drawShape(){
var canvas = document.getElementById('mycanvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();

ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
}
}

</script>
</head>

<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>

</html>``````

## Top Questions

©2020 All rights reserved.