JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
// Center point is p1; angle returned in Radians
function findAngle(p0,p1,p2) {
var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
}
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
var p0 = { 'x': 10, 'y': 20 };
var p1 = { 'x': 20, 'y': 10 }; // center point!
var p2 = { 'x': 60, 'y': 20 };
var angle = findAngle(p0,p1,p2); // center is passed last
console.log(angle * (180 / Math.PI));
ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
ctx.lineTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}