JSFiddle - React, Tailwind, and code Playground

Angle between two points with Math.atan2

by greg gorlen

JavaScript

"use strict";

const canvas = document.createElement("canvas");
canvas.width = innerWidth * 0.97;
canvas.height = innerHeight * 0.97;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
let mouse = { x: 0, y: 0 };
document.addEventListener("mousemove", e => mouse = { x: e.x, y: e.y });

(function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (let i = 0; i < canvas.height; i += 40) {
  	for (let j = 0; j < canvas.width; j += 40) {
      const angleRad = Math.atan2(mouse.y - i, mouse.x - j);
      ctx.beginPath();
      ctx.moveTo(j, i);
      ctx.lineTo(j + 30 * Math.cos(angleRad), i + 30 * Math.sin(angleRad));
      ctx.stroke();
    }
  }
  
  requestAnimationFrame(update);
})();