JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<canvas id="c" width="256px" height="256px" />

JavaScript

const c = document.getElementById("c");
c.style.background = "black";
console.log(c);


const ctx = c.getContext("2d")
ctx.translate(16, 16);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 128, 128);
ctx.fill();

ctx.translate(64, 64);

const point = [-0.2, -1]


ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(point[0] * 64, point[1] * 64);
ctx.lineTo(0, 0);
ctx.stroke();

const a = Math.atan2(point[1], point[0]);
if (Math.abs(point[0] < Math.abs(point[1]))) {
	console.log(a, Math.abs(Math.sin(a)));	
} else {
	console.log(a, Math.abs(Math.cos(a)));
}