JSFiddle - React, Tailwind, and code Playground

by mxxxl

HTML

<canvas id="0" width=94 height=19></canvas>
<canvas id="1" width=158 height=19></canvas>
<canvas id="2" width=158 height=19></canvas>
<canvas id="3" width=158 height=19></canvas>

CSS

canvas{border:1px solid red; margin:0 auto; }

JavaScript

var canvas1=document.getElementById("1");
var ctx=canvas1.getContext("2d");
var cw=canvas1.width;
var ch=canvas1.height;


// constants (could be declared as globals outside this function)
var PI = Math.PI;
var degreesInRadians225 = 225 * PI / 180;
var degreesInRadians135 = 135 * PI / 180;

//var p1 = { x: 0,   y: ch/2 };
//var p2 = { x: cw, y: ch/2 };

var pathStarts = { x: 0, y: ch/2 };
var pathEnds = { x: cw, y: ch/2 };

//var dx = pathEnds.x - pathStarts.x;
//var dy = pathEnds.y - pathStarts.y;

var pathLength = cw;
//var pathLength = Math.sqrt(dx * dx + dy * dy);
//var pathAngle = Math.atan2(dy, dx);



// pct will be incremented from 0 to 100
// At 100 the arrow-line will have its arrowhead at P2
var pct = 0;

var arrowLineLength=0;
var arrowLength=6;

requestAnimationFrame(animate);


function drawLineWithArrowhead(p1, p2, headLength) {

  // calc the angle of the line
  //var dx = p2.x - p1.x;
  //var dy = p2.y - p1.y;
  //var angle = Math.atan2(dy, dx);

  // calc arrowhead points
  var x225 = p2.x + headLength * Math.cos(degreesInRadians225);
  var y225 = p2.y + headLength * Math.sin(degreesInRadians225);
  var x135 = p2.x + headLength * Math.cos(degreesInRadians135);
  var y135 = p2.y + headLength * Math.sin(degreesInRadians135);

  // draw line plus arrowhead
  ctx.beginPath();
  // draw the line from p1 to p2
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  // draw partial arrowhead at 225 degrees
  ctx.moveTo(p2.x, p2.y);
  ctx.lineTo(x225, y225);
  // draw partial arrowhead at 135 degrees
  ctx.moveTo(p2.x, p2.y);
  ctx.lineTo(x135, y135);
  // stroke the line and arrowhead
  ctx.stroke();
}

function animate(time) {

  // calculate how far the line has already animated
  // shorten the distance by the length used by the arrowLine
  var traveled = pathLength * pct / cw;

  // calculate the new starting point of the arrow-line
  var x0 = pathStarts.x - traveled;
  var y0 = pathStarts.y;
  var lineStart = { x: x0, y: y0 };

  // calculate the...