I am struggling to understand why my angles are returning weird angles if anything other than a right angle is drawn. I drew a basic triangle using Canvas in HTML5.
I have the html code and js code to paste here: Please can someone tell me why only these right angles adds up to 180degrees. I have set the js code to output the angles and the sum thereof to the console… so you can see what I am talking about.
You can modify the draw function code to set the position of one of the points to make a right angle.. then you will see the 180 degrees and the angles are correct.
I searched all over the internet for an explanation and checked my formulas. Cant seem to figure this one out.
Thank you very much for any help you can offer..
— CODE FOR HTML —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas - Triangle experiment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/drawShapes.js"></script>
<style>
* { margin: 0; }
* { padding: 0; }
span.markings {
position: absolute;
}
div.drawingArea {
margin: 50px 0 0 10px;
padding: 0;
width: 500px;
height: 500px;
position: relative;
background: #ccc;
}
.coords { position: absolute; top: 0; left: 200px; }
.coords p { position: relative; }
.xcoord, .ycoord { font-weight: bold; color: red; }
#myCanvas { background: #eee; }
</style>
</head>
<body>
<div class="coords"><p>X: <span class="xcoord"></span></p><p>Y: <span class="ycoord"></span></p></div>
<div class="drawingArea">
<span class="markings A"></span>
<span class="markings B"></span>
<span class="markings C"></span>
<canvas id="myCanvas" width="410" height="410">Your browser does not have support for Canvas. You should see:</canvas>
</div>
</body>
</html>
— CODE FOR JS —
$(document).ready(function(){
// Just for dev purposes.. show X and Y coords when inside drawingArea
$('.drawingArea').mousemove(function(e){
$('.xcoord').html(e.pageX -10); // subtract 10 for margin left is 10
$('.ycoord').html(e.pageY -50); // subtract 40 bc margin top is 40
});
draw();
function draw()
{
// Initialize context
createContext('2d');
// Set the style properties.
context.fillStyle = '#fff';
context.strokeStyle = '#FF9900';
context.lineWidth = 5;
// Set initial positions and lengths
pts = {};
pts.AXLoc = 60;
pts.AYLoc = 40;
pts.BXLoc = 360;
pts.BYLoc = 40;
pts.CXLoc = 100;
pts.CYLoc = 340;
// Get difference between points
vector = {};
vector.Ax = Math.abs(pts.AXLoc-pts.BXLoc);
vector.Ay = Math.abs(pts.AYLoc-pts.BYLoc);
vector.Bx = Math.abs(pts.BXLoc-pts.CXLoc);
vector.By = Math.abs(pts.BYLoc-pts.CYLoc);
vector.Cx = Math.abs(pts.CXLoc-pts.AXLoc);
vector.Cy = Math.abs(pts.CYLoc-pts.AYLoc);
console.log(vector.Ax);
console.log(vector.Ay);
console.log(vector.Bx);
console.log(vector.By);
console.log(vector.Cx);
console.log(vector.Cy);
// Find the magnitude of each vector
vector.magA = Math.sqrt(Math.pow(vector.Ax, 2) + Math.pow(vector.Ay, 2));
vector.magB = Math.sqrt((Math.pow((vector.Bx), 2) + Math.pow((vector.By), 2)));
vector.magC = Math.sqrt((Math.pow((vector.Cx), 2) + Math.pow((vector.Cy), 2)));
// Cos A = (A.C) / sqrt(magnitude of A) x (magnited of C)
// This should return radian which is then converted to degrees
// Create function once code works!
vector.angleA = ((vector.Ax * vector.Cx) + (vector.Ay * vector.Cy)) / (vector.magA * vector.magC);
vector.angleA = Math.acos(vector.angleA) * (180/Math.PI);
vector.angleB = ((vector.Ax * vector.Bx) + (vector.Ay * vector.By)) / (vector.magA * vector.magB);
vector.angleB = Math.acos(vector.angleB) * (180/Math.PI);
vector.angleC = ((vector.Bx * vector.Cx) + (vector.By * vector.Cy)) / (vector.magB * vector.magC);
vector.angleC = Math.acos(vector.angleC) * (180/Math.PI);
// Output test data
console.log('angle a = ' + vector.angleA);
console.log('angle b = ' + vector.angleB);
console.log('angle c = ' + vector.angleC);
vector.allangles = vector.angleA + vector.angleB + vector.angleC;
console.log('All angles = ' +vector.allangles ); // only adds up to 180deg if right angle??!!
// Begin drawing
context.beginPath();
// Start from the top-left point.
context.moveTo(pts.AXLoc, pts.AYLoc); // give the (x,y) coordinates
context.lineTo(pts.BXLoc, pts.BYLoc);
context.lineTo(pts.CXLoc, pts.CYLoc);
//context.lineTo(pts.AXLoc, pts.AYLoc); // closes the origin point? alternate way of closing???
context.lineJoin = 'mitre';
context.closePath(); // closes the origin point? good for strokes
// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();
// Set position of markings (spans)
$('span.markings.A').css({
'top' : pts.AYLoc -30,
'left' : pts.AXLoc -5
});
$('span.markings.B').css({
'top' : pts.BYLoc -5,
'left' : pts.BXLoc +10
});
$('span.markings.C').css({
'top' : pts.CYLoc -5,
'left' : pts.CXLoc -25
});
// Write markings onto canvas (degrees and lengths)
$('span.markings.A').html('A');
$('span.markings.B').html('B');
$('span.markings.C').html('C');
}
function createContext(contextType)
{
// Get the canvas element.
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
context = elem.getContext(contextType);
if (!context) {
return;
}
}
});
You’ve got your angle formulas a little wrong. Here’s a working fiddle: http://jsfiddle.net/manishie/AgmF4/.
Here are my corrected formulas: