JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
	<canvas id="canvas" width="800" height="800"></canvas>
</div>

JavaScript

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

var requestAnimFrame =
window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(callback) {
    window.setTimeout(callback, 1000 / 60);
};

//Clone function
Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (var i in this) {
    if (i === 'clone') continue;
    if (this[i] && typeof this[i] === "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};

// Line distance function - finds the distance between two points
// ------------------------
function lineDistance( point1, point2 )
{
  var xs = 0;
  var ys = 0;
 
  xs = point2[0] - point1[0];
  xs = xs * xs;
 
  ys = point2[1] - point1[1];
  ys = ys * ys;
 
  return Math.sqrt( xs + ys );
}
    
function find_angle(p0,p1,c) {
    var p0c = Math.sqrt(Math.pow(c[0]-p0[0],2)+
                        Math.pow(c[1]-p0[1],2)); // p0->c (b)   
    var p1c = Math.sqrt(Math.pow(c[0]-p1[0],2)+
                        Math.pow(c[1]-p1[1],2)); // p1->c (a)
    var p0p1 = Math.sqrt(Math.pow(p1[0]-p0[0],2)+
                         Math.pow(p1[1]-p0[1],2)); // p0->p1 (c)
    return Math.acos((p1c*p1c+p0c*p0c-p0p1*p0p1)/(2*p1c*p0c));
}






//---------------------------------------
// LOOK HERE, THIS IS WHERE THE PROBLEM IS
//---------------------------------------


// Triangle function - This is what actually draws the triangle
// -----------------------
function triangle(a, b, c){

    context.save();
    
    //Draw the triangle
    context.beginPath();
    context.moveTo(a[0], a[1]);
    context.lineTo(b[0], b[1]);
    context.lineTo(c[0], c[1]);
    context.lineTo(a[0], a[1]);
    context.closePath();
    context.strokeStyle="red";
    context.stroke();
    //Now we gotta skew it acording to the rad between ba...