JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div id="canvas">
    <div class="point point_a"></div>
    <div class="point point_b"></div>
    <div class="point point_c"></div>
</div>

CSS

#canvas {
    width:1000px;
    height:1000px;
    background-color:#000000;
    position:relative;
}
.point {
    position:absolute;
    width:5px;
    height:5px;
}
.point:after {
    content: attr(data-coords);
    position:absolute;
    color:#ffffff;
    font-size:10px;
    font-family:arial;
    display:block;
    width:50px;
    height:auto;
    padding:4px;
    background-color:#333333;
    text-align:center;
    margin-top:10px;
    margin-left:-56px;
}
.point_a {
    background-color:#ffffff;
}
.point_b {
    background-color:#ff0000;
}
.point_c {
    background-color:#ff0000;
}

JavaScript

function solve_cx(anglx,sidec)
{
   // convert degrees to radians
   anglexinradians = anglx * Math.PI / 180

   // solve for side a
   sidea = Math.sin(anglexinradians) * sidec;

   // solve for side b
   sideb = Math.cos(anglexinradians) * sidec;
   
    var sides = { a:sidea, b:sideb };
    
    return sides;

}

var v = solve_cx(30,300);

// the position of object in world

var x = 200;
var y = 200;

// we already know the starting point so log that
$('.point_a').css({left: x + 'px', top: y +'px'});
$('.point_a').attr('data-coords', x + ', ' + y );

// now we take starting point and add the left of v.b to get other end of straigth line

$('.point_b').css({left: parseInt(x+v.b) + 'px', top: y +'px'});
$('.point_b').attr('data-coords', parseInt(x+v.b) + ', ' + y );

$('.point_c').css({left: parseInt(x+v.b) + 'px', top: parseInt(y-v.a) +'px'});
$('.point_c').attr('data-coords', parseInt(x+v.b) + ', ' + parseInt(y-v.a) );