JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="myCanvas" width="500" height="500" style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>

</script>
</body>

JavaScript

var canvas=document.getElementById("myCanvas");

canvas.onmousemove = function(event) {

var ctx=canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);

a = {x:10, y:50}
c = {x:90, y:180}

b = {x:event.clientX, y:event.clientY}

ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.lineTo(c.x, c.y);
ctx.setStrokeColor('black');

ctx.stroke()
ctx.closePath();

slope1 = (a.y - b.y) / (a.x - b.x)
intercept1 = b.y - (slope1 * b.x)

slope2 = (c.y - b.y) / (c.x - b.x)
intercept2 = b.y - (slope2 * b.x)

if(!Number.isFinite(slope1)) end1 = {x:b.x, y:b.y*2-a.y}
else if(!slope1)             end1 = {x:b.x*2-a.x, y:b.y}
else                         end1 = {x:b.x*2-a.x, y:(b.x*2-a.x)*slope1+intercept1 }
    

if(!Number.isFinite(slope2)) end2 = {x:b.x, y:b.y*2-c.y}
else if(!slope2)             end2 = {x:b.x*2-c.x, y:b.y}
else                         end2 = {x:b.x*2-c.x, y:(b.x*2-c.x)*slope2+intercept2 }

ctx.beginPath();
ctx.setStrokeColor('red');
ctx.moveTo(b.x, b.y);
ctx.lineTo(end1.x, end1.y);
ctx.moveTo(b.x, b.y);
ctx.lineTo(end2.x, end2.y);
ctx.stroke();
ctx.closePath();

}