# Thread: Help, trying to do a XY plot draw and angle calc in HTML5 Canvas with Javascript

1. Registered User
Join Date
Apr 2014
Posts
1

## Help, trying to do a XY plot draw and angle calc in HTML5 Canvas with Javascript

Hello, I am new in this forum. I will start to be active on Javascript programming. Ive been struggling too hard on the following:

Im looking forward to do a simple app that allows me to draw lines and get the angle between the vectors drawed. (Mainly to compile it with Phonegap and use it on touch, when I touch a coordinate it will mark a point, and when I mark the point b it will draw the vector)
I have knowledge of the Math formula I need to apply in order to get the angle between specific vectors.
The problem Im having right now is that I dont know how to draw the arc between the 2 vectors and display the value close to it to show how many grades it has on the angle.
Ive seen some libraries like: http://jsdraw2dx.jsfiction.com/documentation.htm That are already coded to do vector drawing easily.
I also found many more methods to get the angle like for example: http://www.wikihow.com/Find-the-Angle-Be...wo-Vectors
What I want to do is this:

http://i.imgur.com/vk6Prcr.png

So I want to be able to mark any point in the graph (A) then mark B point to get a line automatically drawed and when I mark the C point it will draw the line between B and C and automatically get the Theta 90 grades in this case of the example.
Im struggling this because I do know how to get the grade, but dont know how to position it and draw the arc between the vectors.
Anyone knows how to reach a quick solution for this?

Please help, this is mainly to adapt and draw when I take picture, I can do that and use this as a second layer, but I cant draw the arc of the vector and display the angle right next to it.

2. Registered User
Join Date
Sep 2007
Posts
390
As far as I know

click on canvas
Code:
```
<html>
<style type="text/css">
</style>
<body>
<canvas id="myCanvas" onclick="show_coords(event)" width="421" height="421" style="margin:0px; padding:0px;background-color:transparent;border:1px solid silver;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">
//grid width and height
var bw = 400;
var bh = 400;
var p = 10;
//size of canvas
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;

var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function drawBoard(){
// ilk for döngüsü yukarıdan aşağıya çizgiler çiziyor her çizginin sol üst tarafına sayı yazıyor.
for (var x = 0; x <= bw; x += 40) {
context.moveTo(0.5 + x + p, p);  // çizginin başladığı yer
context.lineTo(0.5 + x + p, bh + p);  // çizginin bittiği yer
// context.fillText(x/40,x,8);  // rakamları yazan satır burası
}

// ikinci for döngüsü soldan sağa çizgiler çiziyor. her çizginin sol tarafın sayı yazıyor.
for (var x = 0; x <= bh; x += 40) {
context.moveTo(p, 0.5 + x + p);  // çizginin başladığı yer
context.lineTo(bw + p, 0.5 + x + p);  // çizginin bittiği yer
//context.fillText(x/40,0,x + 7); // rakamları yazan satır burası
}

context.strokeStyle = "black"; // çizgi rengi
context.stroke();
}

drawBoard(); // tahtayı çiziyor

var noktalar = [];

// http://www.w3schools.com/jsref/event_clientx.asp
// <body onclick="show_coords(event)" >

function show_coords(event)
{
var x=event.clientX
var y=event.clientY
alert("X coords: " + x + ", Y coords: " + y);

noktalar.push(x,y); //
if(noktalar.length <3) {noktaKoy(x,y); }
if(noktalar.length>2 && noktalar.length<7 ) {noktaKoy(x,y);  cizgiCiz();}

}

// <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p>

var harfler =["A","B","C"];
var n =0;
function noktaKoy(x,y) {

context.beginPath();
var r =20;
context.arc(x,y,r,0,2*Math.PI);
context.fillStyle="red";
context.fill();
context.lineWidth="3";
context.strokeStyle="#663399";
context.font="20px Arial";
context.fillText(harfler[n], x-20,y-20);
context.stroke();
n++;
}

var say=0;
function cizgiCiz() {

context.beginPath();
context.moveTo(noktalar[say],noktalar[say+1]);
context.lineTo(noktalar[say+2],noktalar[say+3]);
context.lineWidth="4";
context.strokeStyle= "#336699";
context.stroke();
say = say+2;

}
// http://www.w3schools.com/tags/canvas_arc.asp

</script>

</body>
</html>```
this code is working in firefox 4.0b9
Last edited by Ayşe; 05-04-2014 at 02:57 PM.

3. Registered User
Join Date
Sep 2007
Posts
390
click on canvas 3 times
Code:
```

<html>
<meta charset="utf-8">
<style type="text/css">
#myCanvas { margin:0px; padding:0px;background-color:transparent;border:1px solid silver;}
#pano { position:absolute; left:450px; top:10px; width:350px; height:350px; }
</style>
<body>
<canvas id="myCanvas" onclick="show_coords(event)" width="400" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
<div id="pano">&nbsp;</div>

<script type="text/javascript">
// http://jsdraw2dx.jsfiction.com/documentation.htm

var el = document.getElementById('pano');
el.innerHTML ="";
//size of canvas
var cw = 400;
var ch = 400;
var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var noktalar = [];
// http://www.w3schools.com/jsref/event_clientx.asp
function show_coords(event)   {
var x=event.clientX
var y=event.clientY

noktalar.push(x,y); //
if(noktalar.length <3) {noktaKoy(x,y); }
if(noktalar.length>2 && noktalar.length<5 ) {noktaKoy(x,y);  cizgiCiz(); ; noktaYazA(x,y);  noktaYazB(); }
if(noktalar.length>4 && noktalar.length<7 ) {noktaKoy(x,y);  cizgiCiz(); noktaYazC();  eksenCiz(noktalar[2], noktalar[3]); noktaYazD();noktaYazE();
/*bul(); */}
noktaYazF();  noktaYazH(); DBA();  EBC();
}

function noktaKoy(x,y) {
context.beginPath();
context.arc(x,y,2,0,2*Math.PI);
context.fillStyle="green";
context.fill();
context.lineWidth="1";
context.strokeStyle="sandybrown";
context.stroke();
}

var say=0;
function cizgiCiz() {
context.beginPath();
context.moveTo(noktalar[say],noktalar[say+1]);
context.lineTo(noktalar[say+2],noktalar[say+3]);
context.lineWidth="1";
context.strokeStyle= "lime";
context.stroke();
say = say+2;
}

function eksenCiz(x,y){
// x eksenini çiziyoruz
context.beginPath();
context.moveTo(0,y);
context.lineTo(cw,y);
context.lineWidth="1";
context.strokeStyle= "turquoise";
context.font="14px Arial";
context.fillStyle="blue";
context.fill();
context.fillText("x", (x-(x-15)),y+15);
context.stroke();

// y eksenini çiziyoruz
context.beginPath();
context.moveTo(x,0);
context.lineTo(x,ch);
context.lineWidth="1";
context.strokeStyle= "turquoise";
context.font="14px Arial";
context.fillText("y", x+10,(y-(y-15)) );
context.stroke();

}
var noktaA=[];
function noktaYazA(){
// A noktasının x ve y değerlerini yazalım
var a = noktalar[0] - noktalar[2];
var b = noktalar[3] - noktalar[1];
noktaA.push(a,b);// bundan faydalanarak hipotenüsü bulacağız. sonra da sinüs bulacağız.
var metin = " A("+a+","+b+")";
context.font="12px Arial";
context.fillText(metin,  noktalar[0], noktalar[1]);
}

function noktaYazB(){
var metin = " B("+ (noktalar[2] - noktalar[2]) + ","+ (noktalar[3]-noktalar[3]) + ")";
context.font="12px Arial";
context.fillText(metin,  noktalar[2], noktalar[3]);
}

var noktaC=[];
function noktaYazC(){
var a = noktalar[4] - noktalar[2];
var b = noktalar[3] - noktalar[5];
noktaC.push(a,b);
var metin = " C("+a+","+b+")";
context.font="12px Arial";
context.fillText(metin,  noktalar[4], noktalar[5]);
}

function noktaYazD(){
var metin = " D(0,"+noktaA[1]+")";
context.font="12px Arial";
context.fillText(metin,  noktalar[0]-noktaA[0], noktalar[1]);
context.beginPath();
context.moveTo(noktalar[0],noktalar[1]);
context.lineTo(noktalar[2],noktalar[1]);
context.lineWidth="1";
context.strokeStyle= "pink";
context.stroke();
}

function noktaYazE(){
var metin = " E(0,"+noktaC[1]+")";
context.font="12px Arial";
context.fillText(metin,  noktalar[4]-noktaC[0], noktalar[5]);
context.beginPath();
context.moveTo(noktalar[4],noktalar[5]);
context.lineTo(noktalar[2],noktalar[5]);
context.lineWidth="1";
context.strokeStyle= "pink";
context.stroke();

}

function noktaYazF(){
var metin = " F("+noktaC[0]+",0)";
context.font="12px Arial";
context.fillText(metin,  noktalar[4], noktalar[5] + noktaC[1] );
context.beginPath();
context.moveTo(noktalar[4],noktalar[5]);
context.lineTo(noktalar[4] ,noktalar[5] + noktaC[1] );
context.lineWidth="1";
context.strokeStyle= "orange";
context.stroke();

}

function noktaYazH(){
var metin = " H("+noktaA[0]+",0)";
context.font="12px Arial";
context.fillText(metin,  noktalar[0],  noktalar[1] + noktaA[1] );
context.beginPath();
context.moveTo(noktalar[0],noktalar[1]);
context.lineTo(noktalar[0] ,noktalar[1] +noktaA[1] );
context.lineWidth="1";
context.strokeStyle= "orange";
context.stroke();

}

// DBA açısının ölçüsünü bulalım.
function DBA(){

var hip= Math.sqrt(Math.pow(noktaA[0] ,2) + Math.pow(noktaA[1]  ,2 ) );
var sinB= noktaA[0] / hip;
var olcu1 = sinB * (180/Math.PI);  // Bu satır doğru mu?

var olcu2= 90 - Math.abs(olcu1);
el.innerHTML += "|DB| = "+noktaA[1] +"<br>";
el.innerHTML += "|DA| = "+noktaA[0] +"<br>";
el.innerHTML += "|AB| = "+hip +"<br>";
el.innerHTML += "|DA| / |AB| = "+ sinB +"<br>";
el.innerHTML += "|HA| / |AB| = "+  (noktaA[1] / hip) +"<br>";
el.innerHTML += "DBA açısı = "+ olcu1+"<br>";  //
el.innerHTML += "ABH açısı = "+ olcu2 +"<br>";

}
// EBC açısının ölçüsü
function EBC(){
var hip= Math.sqrt(Math.pow(noktaC[0] ,2) + Math.pow(noktaA[1]  ,2 ) );
var sinB= noktaC[0] /hip;
var olcu1 = sinB * (180/Math.PI); // Bu satır doğru mu?
var olcu2= 90-Math.abs(olcu1);
el.innerHTML += "|EB| = "+noktaC[1] +"<br>";
el.innerHTML += "|EC| = "+noktaC[0] +"<br>";
el.innerHTML += "|CB| = "+hip +"<br>";
el.innerHTML += "|EC| / |CB| = "+ sinB +"<br>";
el.innerHTML += "EBC acısı = "+ olcu1+"<br>";
el.innerHTML += "CBF açısı = "+ olcu2 +"<br>";

}
</script>
</body>
</html>```
Last edited by Ayşe; 05-06-2014 at 01:35 PM.

4. Registered User
Join Date
Sep 2007
Posts
390
click on canvas 3 times

Code:
```
<html>
<meta charset="utf-8">
<style type="text/css">
#mycanvas {  background-color:transparent; background-image:url(tablo.png); background-repeat:no-repeat; border:4px solid #786;}
</style>
<body>

<canvas id="myCanvas" onclick="show_coords(event)" width="400" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var Tan = ["0", "0.017455", "0.034921", "0.052408", "0.069927", "0.087489", "0.105104", "0.122785", "0.140541", "0.158384", "0.176327", "0.19438", "0.212557", "0.230868", "0.249328", "0.267949", "0.286745", "0.305731", "0.32492", "0.344328", "0.36397", "0.383864", "0.404026", "0.424475", "0.445229", "0.466308", "0.487733", "0.509525", "0.531709", "0.554309", "0.57735", "0.600861", "0.624869", "0.649408", "0.674509", "0.700208", "0.726543", "0.753554", "0.781286", "0.809784", "0.8391", "0.869287", "0.900404", "0.932515", "0.965689", "1", "1.03553", "1.072369", "1.110613", "1.150368", "1.191754", "1.234897", "1.279942", "1.327045", "1.376382", "1.428148", "1.482561", "1.539865", "1.600335", "1.664279", "1.732051", "1.804048", "1.880726", "1.962611", "2.050304", "2.144507", "2.246037", "2.355852", "2.475087", "2.605089", "2.747477", "2.904211", "3.077684", "3.270853", "3.487414", "3.732051", "4.010781", "4.331476", "4.70463", "5.144554", "5.671282", "6.313752", "7.11537", "8.144346", "9.514364", "11.43005", "14.30067", "19.08114", "28.63625", "57.28996" ];

var cw = 400;
var ch = 400;
var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var nokta = [];
var noktaA=[];
var noktaC=[];
var ns=0;
var metin="";

function show_coords(event)   {
var x=event.clientX;
var y=event.clientY;
if(ns>3) {return false;}
if(ns<=3) {nokta.push(x,y);  ns++; }
if(nokta.length == 2) { noktaKoy(x,y, "A" ); }
if(nokta.length == 4 ) {
ns++;
noktaA.push(nokta[0]-x , y - nokta[1] );
metin = "  ("+noktaA[0]+","+noktaA[1]+")";
noktaKoy(nokta[0], nokta[1], metin );
metin = "B(0,0)";
noktaKoy(x,y, metin );
cizgiCiz(x,y);

}
if(nokta.length == 6 ) {
ns++;
noktaC.push(x - nokta[2], nokta[3] - y);
metin = "C("+noktaC[0]+","+noktaC[1]+")";
noktaKoy(x,y, metin );
cizgiCiz(x,y);
//eksenCiz(nokta[2], nokta[3] );

bolge(noktaA);
bolge(noktaC);

hesaplamalar();
dereceYaz();
noktaBul();
}
}

function eksenCiz(x,y){
// x eksenini çiziyoruz
context.beginPath();
context.moveTo(0,y);
context.lineTo(cw,y);
context.lineWidth="1";
context.strokeStyle= "turquoise";
context.font="14px Arial";
context.fillStyle="blue";
context.fill();
context.fillText("x", (x-(x-15)),y+15);
context.stroke();

// y eksenini çiziyoruz
context.beginPath();
context.moveTo(x,0);
context.lineTo(x,ch);
context.lineWidth="1";
context.strokeStyle= "turquoise";
context.font="14px Arial";
context.fillText("y", x+10,(y-(y-15)) );
context.stroke();

}

function noktaKoy(x,y, metin) {
context.font="12px Arial";
context.fillText(metin,  x, y);
context.beginPath();
context.arc(x,y,2,0,2*Math.PI);
context.fillStyle="green";
context.fill();
context.lineWidth="1";
context.strokeStyle="sandybrown";
context.stroke();
}

var say=0;
function cizgiCiz(x,y) {
context.beginPath();
context.moveTo(nokta[say], nokta[say+1] );
context.lineTo(x,y);
context.lineWidth="1";
context.strokeStyle= "lime";
context.stroke();
say = say+2;
}
var bolgesi=[];
function bolge(dizi) {

if(dizi[0] >0 && dizi[1]>0 ) { bolgesi[bolgesi.length]=1;}
if(dizi[0] >0 && dizi[1]<0 ) { bolgesi[bolgesi.length]=4;}
if(dizi[0] < 0 && dizi[1]>0 ) { bolgesi[bolgesi.length]=2;}
if(dizi[0] <0 && dizi[1]<0 ) { bolgesi[bolgesi.length]=3;}
}

function derece(oran){
var angle
for(var i=1; i< Tan.length; i++){
if(oran >= Tan[i-1] && oran <Tan[i]) {angle =i; break; }
}
return angle;
}
var ABC;
function hesaplamalar(){

var toplam = bolgesi[0]+bolgesi[1];
var bir, iki;
var karsiKomsuOran, karsiKomsuOran2;

if(bolgesi[0]== bolgesi[1] ) {
karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
iki = derece(karsiKomsuOran2);
ABC = Math.abs(bir - iki);
}

if(bolgesi[0]!= bolgesi[1] ) {

if(toplam ==5) {
karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
iki = derece(karsiKomsuOran2);
ABC = bir + iki;
}

if(toplam ==3 || toplam == 7) {
karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
iki = derece(karsiKomsuOran2);
ABC = bir + iki;
}

if(toplam == 4 ) {
if(bolgesi[0]==1) {
karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
iki = derece(karsiKomsuOran2) ;
ABC = bir + iki+ 90;
}
if(bolgesi[0]==4) {
karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
iki = derece(karsiKomsuOran2) ;
ABC = bir + iki+ 90;
}
}
if(toplam == 6 ) {
if(bolgesi[0]==4) {
karsiKomsuOran = Math.abs(noktaA[1]) / Math.abs(noktaA[0]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[0]) / Math.abs(noktaC[1]);
iki = derece(karsiKomsuOran2) ;
ABC = bir + iki+ 90;
}
if(bolgesi[0]==2) {
karsiKomsuOran = Math.abs(noktaA[0]) / Math.abs(noktaA[1]);
bir = derece(karsiKomsuOran);
karsiKomsuOran2 = Math.abs(noktaC[1]) / Math.abs(noktaC[0]);
iki = derece(karsiKomsuOran2) ;
ABC = bir + iki+ 90;
}

}
}
}

function dereceYaz(){

context.fillStyle="red";

var sol = nokta[0]-nokta[4];
var soldan;
if(nokta[0]<nokta[4]) {soldan = Math.abs(sol)/2 + nokta[0];}
if(nokta[0]>nokta[4]) {soldan = Math.abs(sol)/2 + nokta[4];}

var ust = nokta[1]-nokta[5];
var ustten;
if(nokta[1]<nokta[5]) {ustten = Math.abs(ust)/2 + nokta[1];}
if(nokta[1]>nokta[5]) {ustten = Math.abs(ust)/2 + nokta[5];}

context.font="18px Arial";
context.fillText(ABC +"°",  soldan , ustten);

// http://www.degraeve.com/reference/specialcharacters.php
// degree sign	°	&deg;	°
}

</script>
</html>```
if A(0,... ) C(..., 0) , this code write "undefined".
Last edited by Ayşe; 05-09-2014 at 12:30 PM.

5. Registered User
Join Date
Sep 2007
Posts
390
draw the arc between AB and BC

Code:
```
<html>
<meta charset="utf-8">
<style type="text/css">
#mycanvas { margin:0px; padding:0px; background-color:transparent;/* background-image:url(trigonometri_cetveli.jpg); background-repeat:no-repeat; */ border:4px solid #786;}
</style>
<body>
<canvas id="myCanvas" onclick="cnvs_getCoordinates(event)" width="400" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

/*

-+    |    ++
------|------
--    |    +-

*/

// http://www.w3schools.com/html/tryhtml5_canvas_coordinates.htm
// http://www.w3schools.com/tags/ref_canvas.asp
// http://www.w3schools.com/tags/canvas_arc.asp
var Tan = ["0", "0.017455", "0.034921", "0.052408", "0.069927", "0.087489", "0.105104", "0.122785", "0.140541", "0.158384", "0.176327", "0.19438", "0.212557", "0.230868", "0.249328", "0.267949", "0.286745", "0.305731", "0.32492", "0.344328", "0.36397", "0.383864", "0.404026", "0.424475", "0.445229", "0.466308", "0.487733", "0.509525", "0.531709", "0.554309", "0.57735", "0.600861", "0.624869", "0.649408", "0.674509", "0.700208", "0.726543", "0.753554", "0.781286", "0.809784", "0.8391", "0.869287", "0.900404", "0.932515", "0.965689", "1", "1.03553", "1.072369", "1.110613", "1.150368", "1.191754", "1.234897", "1.279942", "1.327045", "1.376382", "1.428148", "1.482561", "1.539865", "1.600335", "1.664279", "1.732051", "1.804048", "1.880726", "1.962611", "2.050304", "2.144507", "2.246037", "2.355852", "2.475087", "2.605089", "2.747477", "2.904211", "3.077684", "3.270853", "3.487414", "3.732051", "4.010781", "4.331476", "4.70463", "5.144554", "5.671282", "6.313752", "7.11537", "8.144346", "9.514364", "11.43005", "14.30067", "19.08114", "28.63625", "57.28996" ];
var n = 0;
var nokta = [];
function cnvs_getCoordinates(e)   {
if(n< 3) {
var x=e.clientX;
var y=e.clientY;
nokta.push(x,y);
duzenle(x,y);
n++;
}
}

var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function duzenle(x,y) {

if(nokta.length == 2 ) {  noktaKoy(x,y, "A" ); }
if(nokta.length == 4 ) {  noktaKoy(x,y, "B" ); cizgiCiz(x,y);}
if(nokta.length == 6 ) {  noktaKoy(x,y, "C" ); cizgiCiz(x,y);  hesapla();}
}

// http://www.w3schools.com/html/html5_canvas.asp

function metinYaz(m,x,y){
context.font="12px Arial";
context.fillStyle="sandybrown";
context.fillText(m,  x, y);
context.fill();
}
function noktaKoy(x,y, metin) {
context.font="12px Arial";
context.fillStyle="lightseagreen";
context.fill();
context.fillText(metin,  x, y);
context.beginPath();
context.arc(x,y,2,0,2*Math.PI);
context.fillStyle="lightseagreen";
context.fill();
context.lineWidth="1";
context.strokeStyle="lightseagreen";
context.stroke();
}

var say=0;
function cizgiCiz(x,y) {
context.beginPath();
context.moveTo(nokta[say], nokta[say+1] );
context.lineTo(x,y);
context.lineWidth="1";
context.strokeStyle= "turquoise";
context.stroke();
context.closePath()
say = say+2;
}

function derece(oran, dizi){
var angle
for(var i=1; i< dizi.length; i++){
if(oran >= dizi[i-1] && oran < dizi[i]) {angle =i; break; }
}
return angle;
}

var ABC;
function hesapla(){
// A ve C noktalarının x ve y değerlerini bulalım
var Ax = nokta[0] - nokta[2];
var Ay = nokta[3] - nokta[1];
var Cx = nokta[4] - nokta[2];
var Cy = nokta[3] - nokta[5];

noktaKoy(nokta[2], nokta[1], "H");
// HBA açısı
var xOrta= (nokta[0] + nokta[2]+nokta[2])/3;
var yOrta= (nokta[1] + nokta[3] + nokta[1])/3;
var HBA= derece(Math.abs(Ax)/Math.abs(Ay),Tan);
metinYaz(HBA +"°",xOrta,yOrta);

noktaKoy(nokta[0], nokta[3], "D");
// DBA açısı
var xOrta= (nokta[0] + nokta[2]+nokta[0])/3;
var yOrta= (nokta[1] + nokta[3] + nokta[3])/3;
var DBA= derece(Math.abs(Ay)/Math.abs(Ax),Tan);//
metinYaz(DBA+"°",xOrta,yOrta);

noktaKoy(nokta[4], nokta[3], "G");
// GBC açısı
var xOrta= (nokta[2] + nokta[4]+nokta[4])/3;
var yOrta= (nokta[3] + nokta[3] + nokta[5])/3;
var GBC= derece(Math.abs(Cy/Cx),Tan);//
metinYaz(GBC+"°",xOrta,yOrta);

noktaKoy(nokta[2], nokta[5], "F");
// FBC açısı
var xOrta= (nokta[4] + nokta[2]+nokta[2])/3;
var yOrta= (nokta[5] + nokta[3] + nokta[5])/3;
var FBC= derece(Math.abs(Cx/Cy),Tan);
metinYaz(FBC+"°",xOrta,yOrta);

//  iki kenarın arasına açı işareti çizmek
var A= [];
//++++
if(Ax>0 && Ay>0 && Cx>0 && Cy>0 ) {
A[0]= 1.5*Math.PI +((HBA/180)*Math.PI);
A[1]= 2*Math.PI - ((GBC/180)*Math.PI) ;
A[2]=  90-(HBA +GBC) ;
}
//----
if(Ax<0 && Ay<0 && Cx<0 && Cy<0 ) {
//ABC= ((( Math.PI - ((DBA/180)*Math.PI)) - ( 0.5*Math.PI +((FBC/180)*Math.PI) )) / Math.PI ) *180
A[0]= 0.5*Math.PI +((FBC/180)*Math.PI);
A[1]= Math.PI - ((DBA/180)*Math.PI) ;
A[2]=  90-(HBA +GBC) ;
}
//+++-
if(Ax>0 && Ay>0 && Cx>0 && Cy<0 ) {
A[0]= 1.5*Math.PI +((HBA/180)*Math.PI);
A[1]= 2*Math.PI + ((GBC/180)*Math.PI);
A[2]=  180 - (HBA +FBC) ;

}

//-+-+
if(Ax<0 && Ay>0 && Cx<0 && Cy>0 ) {
A[0]= Math.PI +((GBC/180)*Math.PI);
A[1]= 1.5*Math.PI - ((HBA/180)*Math.PI);
A[2]=  90-(HBA +GBC) ;

}
//-+--      sorun yok  A noktası -+ alanında olacak
if(Ax<0 && Ay>0 && Cx<0 && Cy<0 ) {
A[0]= 0.5*Math.PI + ((FBC/180)*Math.PI);
A[1]= 1.5*Math.PI -((HBA/180)*Math.PI);
A[2]=   180 - (HBA + FBC)  ;

}
// -+++
if(Ax<0 && Ay>0 && Cx>0 && Cy>0 ) {
A[0]= 1.5*Math.PI -((HBA/180)*Math.PI);
A[1]= 1.5*Math.PI + ((FBC/180)*Math.PI);
A[2]=  180- (GBC + DBA) ;
}
// --+-     A/\C
if(Ax<0 && Ay<0 && Cx>0 && Cy<0 ) { //ABC = 180 - (GBC + DBA); alert(ABC);
A[0]= 0.5*Math.PI -((FBC/180)*Math.PI);
A[1]= 0.5*Math.PI + ((HBA/180)*Math.PI);
A[2]=  HBA + FBC ;
}
//+-+-
if(Ax>0 && Ay<0 && Cx>0 && Cy<0 ) {
A[0]= 0+((DBA/180)*Math.PI);
A[1]= 0.5*Math.PI - ((FBC/180)*Math.PI);
A[2]=  90-(DBA + FBC) ;
}

//+---
if(Ax>0 && Ay<0 && Cx<0 && Cy<0 ) {
A[0]= 0+((DBA/180)*Math.PI);
A[1]= 0.5*Math.PI + ((FBC/180)*Math.PI);
A[2]=  180-(DBA + GBC) ;
}

context.closePath();

context.beginPath();
context.strokeStyle= "red";
context.arc(nokta[2],nokta[3], 40, A[0], A[1]  );
context.stroke();
context.closePath();

//dereceYaz( A[2] );

var ang= Math.round( (( A[1] - A[0]) /Math.PI ) *180  );
dereceYaz(ang);
}

function dereceYaz(a){
// ağırlık merkezini bulalım
var gx = (nokta[0]+nokta[2]+nokta[4] )/3;
var gy=  (nokta[1]+nokta[3]+nokta[5])/3;
context.fillStyle="red";
context.font="18px Arial";
context.fillText(a +"°",  gx , gy);

}
</script>
Click on canvas 3 times
<br>
</html>```
This code is working in firefox 4.0b9
Last edited by Ayşe; 05-14-2014 at 06:51 AM.