JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<canvas id="myCanvas" style="position:absolute">
Sorry, your browser does not support canvas.
</canvas>

CSS

* {margin:0;padding: 0}
body,html {height:100%}

JavaScript

let mouseDown = false;
let positionX, positionY;
const canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
const position = {};
addEventListener("mousedown", (event) => {
  mouseDown = true;
  position.X = event.clientX;
  position.Y = event.clientY;
});

addEventListener("mousemove", (event) => {
  if (mouseDown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(position.X, position.Y);
    ctx.lineTo(event.clientX, event.clientY);
    ctx.stroke();
    const dx = event.clientX-position.X;
    const dy = event.clientY-position.Y;
    const dz = (dx**2+dy**2)**(1/2);
    const vector = [dx==0?0:(dx**2)/(dz**2)*Math.sign(dx),dy==0?0:(dy**2)/(dz**2)*Math.sign(-dy)];

     console.log(vector);
  }
});

addEventListener("mouseup", (event) => {
  mouseDown=false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});