JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="myCanvas" width="978px" height="500px"> </canvas>
JavaScript
// ======Mouse Coordinates====== http://www.codelifter.com/main/javascript/capturemouseposition1.html
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft - $("#myCanvas").offset().left;
tempY = event.clientY + document.body.scrollTop - $("#myCanvas").offset().top;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX - $("#myCanvas").offset().left;
tempY = e.pageY - $("#myCanvas").offset().top;;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
}
// ======Begin canvas======
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function makeLine() {
}
// ======Define Circle Class======
function Circle(angle,radius,speed,trackingQuad,length,color) {
this.angle = angle;
this.radius = radius;
this.speed = speed;
this.trackingQuad = trackingQuad;
this.length = length;
this.color = color;
}
// ======Create Objects and store them in a array======
var circles = new Array();
circles[0] = new Circle(0.01,70,0.000001,1,100,"red");
circles[1] = new Circle(0.05,80,0.000003,2,90,"blue");
// ======Prepare necessary variables and arrays======
//var degree;
//var xC;
//var yC;
//var angle = 0.01;
//var radius = 70;
//var speed = 0.000001;
//var trackingQuad = 1;
//var alpha;
//var length = 100;
var points = new Array();
for (var g in circles) {
points[g] = new Array();
}
// ======Set frame run 1000 times per sec======
var interval =...