JSFiddle - React, Tailwind, and code Playground

by ItsLeeOwen

HTML

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support HTML5 Canvas.
</canvas>
</div>

JavaScript

var bullseye;
   bullseye = new Image();
   bullseye.src = "http://iconizer.net/files/PixeloPhilia/orig/soccer-ball.png"
   bullseye.onload = eventAssetsLoaded;


function eventAssetsLoaded() {

   canvasApp();
}

function canvasApp() {

  var pointImage = new Image();
  pointImage.src = "http://iconizer.net/files/PixeloPhilia/orig/soccer-ball.png";
  function  drawScreen () {

      context.fillStyle = '#EEEEEE';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000';
      context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);

      var t = player.t;

      var cx = 3 * (p1.x - p0.x)
      var bx = 3 * (p2.x - p1.x) - cx;
      var ax = p3.x - p0.x - cx - bx;

      var cy = 3 * (p1.y - p0.y);
      var by = 3 * (p2.y - p1.y) - cy;
      var ay = p3.y - p0.y - cy - by;

      var xt = ax*(t*t*t) + bx*(t*t) + cx*t + p0.x;

      var yt = ay*(t*t*t) + by*(t*t) + cy*t + p0.y;

      player.t += player.speed;

      if (player.t > 1) {
         player.t = 1;
      }
      //draw the points

      context.font = "10px sans";

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p0.x,p0.y,8,0,Math.PI*2,true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("0",p0.x-2,p0.y+2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p1.x,p1.y,8,0,Math.PI*2,true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("1",p1.x-2,p1.y+2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p2.x,p2.y,8,0,Math.PI*2,true);
      context.closePath();
      context.fill();
      context.fillStyle = "#FFFFFF";
      context.fillText("2",p2.x-2, p2.y+2);

      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(p3.x,p3.y,8,0,Math.PI*2,true);
      context.closePath();
     ...