JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<canvas id="background" width="512" height="512" style="border:1px solid black;"></canvas>

JavaScript

var points = [
    [-0.452529783204088, 0.787457944756656],
    [-0.997485927313175, 0.0400712283463976],
    [-0.510434094318516, 1.10842980890496],
    [0.510434094318516, 1.10842980890496]
];
var colors = ['#ff0000', '#00ff00', '#0000ff'];

var canvas = document.getElementById('background');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;

function line(x1,y1,x2,y2){
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
}

midx = context.canvas.width/2;
midy = context.canvas.height/2;

line(0,midy,context.canvas.width,midy);
line(midx,0,midx,context.canvas.height);

for (var p in points) {
    context.strokeStyle = colors[p];
    var point = points[p]
    console.log(point[0]);
    line(midx,midy,midx+point[0]*200.0,midy+point[1]*200.0);
}