JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

var pos = [{
    x: 300,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 10,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 80,
    y: 200,
    mx: 10,
    my: 100
  },
  {
    x: 300,
    y: 100,
    mx: 80,
    my: 200
  }
];

function gameLoop() {

  window.requestAnimationFrame(gameLoop);

  renderLine();

}

var width = 10;
var height = 10;
var ticks = 0;
var MAX = 4;
var s = 0;

function renderLine() {
  if (slow()) {
    ctx.moveTo(pos[ticks].mx, pos[ticks].my, 0, 0);
    ctx.lineTo(pos[ticks].x, pos[ticks].y);
    ctx.stroke();
    ticks = (ticks > MAX) ? 0 : ticks + 1;
  }

}

function slow() {
  var rend = false
  if (s > 30) {
    s = 0;
    rend = true;
  } else {
    s += 1;
  }
  return rend;
}
//Setting up canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

gameLoop();
/*
ctx.moveTo(0,0,0,0);
ctx.lineTo(300,100);
ctx.stroke();

ctx.moveTo(0,0,0,0);
ctx.lineTo(10,100);
ctx.stroke();

ctx.moveTo(10,100,0,0);
ctx.lineTo(80,200);
ctx.stroke();

ctx.moveTo(80,200,0,0);
ctx.lineTo(300,100);
ctx.stroke();
*/