<canvas></canvas>

body {
    margin: 0;
    overflow: hidden;
}

canvas {
    image-rendering: pixelated;
}

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const point = (x, y) => ({ x, y });
const points = {
    A: point(-1, 1),
    B: point(1, 1),
    C: point(1, -1),
    D: point(-1, -1),
    E: point(0, -0),
};
const k = 50;

const drawPoint = (point, label) => {
    context.beginPath();
    context.arc(point.x * k, point.y * -k, 5, 0, Math.PI * 2);
    context.closePath();
    context.fill();
    context.fillText(label, point.x * k + 15, point.y * -k - 15);
};

const drawLine = (a, b) => {
    context.beginPath();
    context.moveTo(a.x * k, a.y * -k);
    context.lineTo(b.x * k, b.y * -k);
    context.stroke();
    context.closePath();
};

const side = (a, b, p) =>  Math.sign((b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x));

const update = (time) => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    
    context.fillStyle = 'royalblue';
    context.font = '24px sans-serif';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    
    drawPoint(points.A, 'A');
    drawPoint(points.B, 'B');
    drawPoint(points.C, 'C');
    drawPoint(points.D, 'D');
    
    context.strokeStyle = 'royalblue';
    context.lineWidth = 2;
    context.globalAlpha = 0.5;
    
    drawLine(points.A, points.B);
    drawLine(points.B, points.C);
    drawLine(points.C, points.D);
    drawLine(points.D, points.A);
    
    context.fillStyle = 'tomato';
    context.globalAlpha = 1;
    
    drawPoint(points.E, 'E');
    
    const inArea = side(points.A, points.B, points.E) === -1 &&
                   side(points.B, points.C, points.E) === -1 &&
                   side(points.C, points.D, points.E) === -1 &&
                   side(points.D, points.A, points.E) === -1;
    
    context.fillText(inArea, 0, canvas.height / 2 - k / 2);
    context.restore();
    
    requestAnimationFrame(update);
};

const resize = () => {
    [canvas.width, canvas.height] = [innerWidth, innerHeight];
};

const init = () => {
    const gui = new dat.GUI();
    for (const key in points) {
        const folder = gui.addFolder(key);
        folder.add(points[key], 'x', -3, 3, 0.1);
        folder.add(points[key], 'y', -3, 3, 0.1);
        folder.open();
    }
    
    resize();
    
    requestAnimationFrame(update);
};

window.addEventListener('load', init);
window.addEventListener('resize', resize);