JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Move mouse to aim canon. Mousedown to fire.</h4>
<canvas id="canvas" width=440 height=400></canvas>

CSS

body{ background-color: white; }
#canvas{border:1px dotted black;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//        ctx.lineCap = "round";
//        ctx.lineJoin = "round";
//        ctx.lineWidth=3;

var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();

var isDown=false;
var startX;
var startY;

var PI=Math.PI;
var cx=220;
var cy=360;
var w=20;
var h=70;

draw(0);

function draw(radianAngle){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(radianAngle);
    ctx.fillRect(-w/2,-h/2,20,70);
    ctx.restore();
}


function handleMouseDown(e){
    e.preventDefault();
    e.stopPropagation();
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);
    ctx.beginPath();
    ctx.arc(mouseX,mouseY,12,0,PI*2);
    ctx.closePath();
    ctx.fillStyle="black";
    ctx.fill();
    ctx.font="14px verdana";
    ctx.fillText("Bang!",mouseX-15,mouseY-20);
}


function handleMouseMove(e){
    e.preventDefault();
    e.stopPropagation();
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);
    var dx=mouseX-cx;
    var dy=mouseY-cy;
    var rAngle=Math.atan2(dy,dx);
    draw(rAngle-PI/2);
}

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});