HTML5 Game - Canvas Shape Ellipse

Description

Ellipse
Demo

<!doctype html>  
<html>   
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  

  <script>  
  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        angle = 0,  //from   w w  w  . j a v a 2  s.  c o m
        centerX = canvas.width / 2,  
        centerY = canvas.height / 2,  
        radiusX = 150,  
        radiusY = 100,
        xpos = 0,
        ypos = 0,
        speed = 0.05;  
      
            xpos = centerX + Math.sin(angle) * radiusX;  
      ypos = centerY + Math.cos(angle) * radiusY; 
          
    context.lineWidth = 2;  
      
    (function drawFrame () {  
      window.requestAnimationFrame(drawFrame, canvas);  
      //context.clearRect(0, 0, canvas.width, canvas.height);  
      context.beginPath();  
      context.moveTo(xpos, ypos);  
      //Calculate the new position.  
      angle += speed;  
      xpos = centerX + Math.sin(angle) * radiusX;  
      ypos = centerY + Math.cos(angle) * radiusY; 
      context.lineTo(xpos, ypos);  
      context.stroke();  
    }());  
  };  
  </script>  
 </body>  
</html>