JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX14: Simple Gravity</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
   canvasApp();
}

function canvasSupport () {
     return true;
}

function canvasApp() {

    if (!canvasSupport()) {
            return;
        }

  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);

      if (ball.y + ball.radius <= theCanvas.height) {
         ball.velocityy += gravity;
      } else {
         ball.velocityx *= 0.75;
         ball.velocityy *= -0.75;
         console.log(ball);
         ball.y = theCanvas.height - ball.radius;

      }

      ball.y += ball.velocityy;
      ball.x += ball.velocityx;

      context.fillStyle = "#000000";
      context.beginPath();
      context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
      context.closePath();
      context.fill();

   }
   var speed = 4;

   var gravity = .1;
   var angle = 305;
   var radians = angle * Math.PI/ 180;
   var radius = 15;
   var vx = Math.cos(radians) * speed;
   var vy = Math.sin(radians) * speed;

   theCanvas = document.getElementById("canvasOne");
   context = theCanvas.getContext("2d");

   var p1 = {x:20,y:theCanvas.width-radius};
   var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius};

   setInterval(drawScreen, 33);

}

</script>

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

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