JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=x width=100 height=100></canvas>

CSS

canvas {
  width: 400px;
  height: 400px;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  z-index: -11;
  position: relative;
  float: left;
  clear: both;
}

JavaScript

var theCanvas = document.getElementById("x");
var ctx = theCanvas.getContext("2d");
var xo = (theCanvas.width / 2);
var yo = (theCanvas.height / 2);
var loc  = new Vector(25,25);
var rotation = 0;

function draw() {
  // visual aid showing origin
  draw_dot(0, 0, 2, "#000")
  //showing loc vector
  draw_dot(loc.x, loc.y, 2, "#0000ff");

  rotation += 0.07;

  var tmp = new Vector(0,0);
  tmp.add(loc);
  tmp.rotate(rotation);

  draw_dot(tmp.x, tmp.y, 4, "#ff0000");
  window.requestAnimationFrame(draw);
}
ctx.translate(50,50);
draw();

setInterval(()=>{
  ctx.fillStyle = "rgba(255,255,255,0.15)";
  ctx.fillRect(-50,-50,150,150);
},100)

function draw_dot(x,y,size,color) {
	ctx.fillStyle = color;
  ctx.fillRect(x-size/2, y-size/2, size, size);
}

function Vector(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.sub = function(b) {
        this.x -= b.x;
        this.y -= b.y;
    };
    this.add = function(b) {
        this.x += b.x;
        this.y += b.y;
    };
    this.heading = function () {
   		return Math.atan2(this.y, this.x);
    }
    this.mag = function() {
        return Math.sqrt(Math.pow(Math.abs(this.x),2)  + Math.pow(Math.abs(this.y),2));
    };
    this.magsq = function() {
        return Math.pow(Math.abs(this.x),2)  + Math.pow(Math.abs(this.y),2);
    };
    this.div = function(value) {
        this.x /= value;
        this.y /= value;
    };
    this.mul = function(value) {
        this.x *= value;
        this.y *= value;
    };
    this.setMag = function(value) {
        var m = this.mag();
        if (m !== 0 && m != 1) {
            this.div(m);
        }
        this.mul(value);
    };
    this.hypot = function(b) {
        return Math.hypot(this.x - b.x, this.y - b.y);
    };
    this.lerp = function(b, step) {
        var a = new Vector(this.x, this.y);
        b.sub(a);
        b.mul(step);
        b.add(a);
        return b;
    };
    this.toDegrees = function (o) {
    	return o * 180 / Math.PI;
    };
    this.toRadians =...