JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

body {
    margin: 0;
}

JavaScript

const canvas = document.querySelector("canvas"),
	ctx = canvas.getContext("2d");

const red = "rgb(104, 0, 0)",
	lb = "rgb(126, 139, 185)",
    db = "rgb(20, 64, 87)";

var width,
	height,
	centerX,
	centerY,
	smallerDimen;

var canvasData,
	inCoords;
    
function sizeCanvas() {
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
    centerX = width / 2;
	centerY = height / 2;
    smallerDimen = Math.min(width, height);
}

function drawNormalState() {
    // Color the bg
    ctx.fillStyle = db;
    ctx.fillRect(0, 0, width, height);

    // Color the circle
    ctx.arc(centerX, centerY, smallerDimen / 4, 0, Math.PI * 2, true);
    ctx.fillStyle = red;
    ctx.fill();
    ctx.lineWidth = 3;
    ctx.strokeStyle = lb;
    ctx.stroke();

    // Color the triangle
    ctx.beginPath();
    ctx.moveTo(centerX + smallerDimen / 17, centerY - smallerDimen / 10);
    ctx.lineTo(centerX + smallerDimen / 17, centerY + smallerDimen / 10);
    ctx.lineTo(centerX - smallerDimen / 9, centerY);
    ctx.fillStyle = lb;
    ctx.fill();
    ctx.closePath();
    
    screenshot();
}

function screenshot() {
	canvasData = ctx.getImageData(0, 0, width, height).data;
}

function getEndPoints(startX, startY, xDiff, yDiff, maxX, maxY) {
	let currX = startX, 
    	currY = startY;
    while(currX > 0 && currY > 0 && currX < maxX && currY < maxY) {
    	currX += xDiff;
        currY += yDiff;
    }
    let points = {
    	firstPoint: [currX, currY]
    };
    
    currX = startX;
    currY = startY;
    while(currX > 0 && currY > 0 && currX < maxX && currY < maxY) {
    	currX -= xDiff;
        currY -= yDiff;
    }
    points.secondPoint = [currX, currY];
    
    return points;
}

// From http://paulbourke.net/geometry/pointlineplane/javascript.txt
function intersect(point1, point2, point3, point4) {
	let x1 = point1[0], 
    	y1 = point1[1], 
        x2 = point2[0], 
        y2 = point2[1], 
        x3 = point3[0], 
        y3 = point3[1], 
        x4...