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

• 04-24-2014, 10:48 AM
rodvan
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.
• 05-04-2014, 02:54 PM
Ayşe
As far as I know

click on canvas
Code:

```  <html> <head> <style type="text/css"> body {margin:0px; padding:0px;} </style> </head> <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"> // http://www.webdeveloper.com/forum/showthread.php?293751-Help-trying-to-do-a-XY-plot-draw-and-angle-calc-in-HTML5-Canvas-with-Javascript //grid width and height var bw = 400; var bh = 400; //padding around grid 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
• 05-06-2014, 01:31 PM
Ayşe
click on canvas 3 times
Code:

```    <html> <head> <meta charset="utf-8"> <style type="text/css"> body {margin:0px; padding:0px;} #myCanvas { margin:0px; padding:0px;background-color:transparent;border:1px solid silver;} #pano { position:absolute; left:450px; top:10px; width:350px; height:350px; } </style> </head> <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 // http://www.webdeveloper.com/forum/showthread.php?293751-Help-trying-to-do-a-XY-plot-draw-and-angle-calc-in-HTML5-Canvas-with-Javascript&p=1329619#post1329619 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>```
• 05-09-2014, 12:22 PM
Ayşe
click on canvas 3 times

Code:

```  <html> <head> <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> </head> <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"> // radyan=(derece/180)*math.pi // derece=(radyan/math.pi)*180 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); //alert(bolgesi); 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(){ //alert(bolgesi); var toplam = bolgesi[0]+bolgesi[1]; //alert("toplam= "+toplam); 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;   }     } } //alert("ABC = "+ABC); } 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> </head> </html>```
if A(0,... ) C(..., 0) , this code write "undefined".
• 05-14-2014, 06:46 AM
Ayşe
draw the arc between AB and BC

Code:

```  <html> <head> <meta charset="utf-8"> <style type="text/css"> body {margin:0px; padding:0px;} #mycanvas { margin:0px; padding:0px; background-color:transparent;/* background-image:url(trigonometri_cetveli.jpg); background-repeat:no-repeat; */ border:4px solid #786;} </style> </head> <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> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Circle_radians.gif/300px-Circle_radians.gif" width="300" height="300" alt=""> </head> </html>```
This code is working in firefox 4.0b9

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.22874 seconds
• Memory Usage 2,487KB
• Queries Executed 11 (?)
Template Usage (20):
• (4)bbcode_code_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates