JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

(function(){
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    
    var cx = 150;
    var cy = 75;
    var heading = 270     /180*Math.PI; // up
    
    //canvas.onmousemove = function(e) {
    //    bearing = Math.PI * 2 * ((e.clientX - canvas.offsetLeft) / 300);
    //};
       
    
    // get left coordinate (get position forward n px after turning left 90 degrees)
    var x = 10 * Math.cos(heading-0.5*Math.PI);
    var y = 10 * Math.sin(heading-0.5*Math.PI);
    
    ctx.clearRect(0,0,300,150);
    
    ctx.fillStyle = 'black';    
    ctx.fillText((heading/Math.PI*180).toFixed(0)+' \xb0 | '+(heading/Math.PI).toFixed(2)+' \u03c0', 10, 10);
    
    // axis
    /*
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(150.5, 0.5);
    ctx.lineTo(150.5, 150.5);
    ctx.moveTo(0.5, 75.5);
    ctx.lineTo(300.5, 75.5);
    ctx.stroke();
    */
    
    // line
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(150,75);
    ctx.lineTo(150+x,75+y);
    ctx.stroke();
    
    // red dot at end of line
    ctx.fillStyle = 'red';
    ctx.fillRect(150+x, 75+y, 2, 2);
    
})();