JSFiddle - React, Tailwind, and code Playground

by tmcw

HTML

<canvas id='c'></canvas>

JavaScript

var c = document.getElementById('c');
c.width = 200;
c.height = 200;
var ctx = c.getContext('2d');

c.onmousemove = function(e) {
    // clear the canvas
    c.width = c.width;
    // translate drawing (so that 0, 0 is at 100, 100)
    ctx.translate(100, 100);
    // find the angle of the centerpoint of the canvas (100, 100)
    // to the mouse's position
    var angle = Math.atan2(
        e.offsetY - 100,
        e.offsetX - 100);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    // draw a 90px long line in that angle
    ctx.lineTo(Math.cos(angle) * 90, Math.sin(angle) * 90);
    ctx.stroke();
};