title: Canvas Animation Circle Not showing
body: <p>I'm modelling a two body orbit using JavaScript and HTML canvas. I have a animation function which draws a circle which is the sun and a second circle at set co-ordinates which is the earth. I've transformed the co-ordinate system so the centre of the page is (0,0). I also have an unfinished leapfrog function which will eventually update the position and velocity each time.</p>
  
  <p>My issue is that the second circle no longer shows when its in the animate function but the sun still shows. I think its something to do with the requestAnimationFrame() method but i'm really not to sure what to do about it. </p>
  
  <p>this is the code for the animate function and also the end of the leapfrog function (values are returned which are used in the animate function) and the main function which calls the others:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//retrieving the DOM
  var canvas = document.getElementById("solarsys");
  // context variable
  var c = canvas.getContext('2d');
  
  //initial positions for the earth unit m
  // two sets so that data can be stored for reset function
  var initialXPos = (-7.564432386799773E-01 * 1.496e+11);
  var initialYPos = (-6.718892710848022E-01 * 1.496e+11);
  var xPos = (-7.564432386799773E-01 * 1.496e+11);
  var yPos = (-6.718892710848022E-01 * 1.496e+11);
  //initial velocities for the earth unit ms-1
  var initialXVel = ((1.110596439833439E-02 * 1.496e+11) / 86400);
  var initialYVel = ((-1.296782278648682E-02 * 1.496e+11) / 86400);
  var xVel = ((1.110596439833439E-02 * 1.496e+11) / 86400);
  var yVel = ((-1.296782278648682E-02 * 1.496e+11) / 86400);
  
  //position and velocity scales
  var posScale = 1E9;
  var velScale = 1000;
  
  function axis(c) {
    //this function translates the canvas co-ordinates to cartesian co-ordinates
    //moves the origin to the centre of the page
    c.translate(400, 275);
    //makes the y axis grow up and shrink down
    c.scale(1, -1);
  };
  
  function leapfrog(xPos, yPos, posScale, xVel, yVel, velScale) {
    //gravitational constant m3kg-1s-2
    var G = 6.67E-11;
    //mass of earth kg
    var m2 = 5.972E24;
    //mass of sun kg
    var m1 = 1.989E30;
    // earth sun distance 1AU = 149 600 000 000 m but depends on where in orbit 
    // therefore do pythagoras on current x and y co-ordinates of position
    //first covert xPos and yPos to m so force equation dimensionally constant
    var xPosm = xPos * 1.496E+11;
    var yPosm = yPos * 1.496e+11;
    var r = (Math.sqrt((Math.pow(xPosm, 2)) + (Math.pow(yPosm, 2))));
    //calculate the force on the earth using F = Gm1m2/r^2
    //force is towards the centre of the sun
    var F = ((G * m1 * m2) / (Math.pow(r, 2)));
    //calculate earths acceleration using Newton 2nd a = F / m 
    var a = (F / m2);
    //leapfrog loop for new position and velocity
    //position new = previous position + previous half velocity * time step
    //velocity new +1/2 from pos = previous velocity 1/2 from pos + acceleration
  
    // calculates scaled positions
    var xPosScaled = xPos / posScale;
    var yPosScaled = yPos / posScale;
  
    //calculates scaled velocities
    var xVelScaled = xVel / velScale;
    var yVelScaled = yVel / velScale;
  
    return [xPosScaled, yPosScaled, xVelScaled, yVelScaled];
  };
  
  function drawEarth(c, xPosScaled, yPosScaled) {
    //draws a blue circle - the earth
    c.beginPath();
    c.arc(xPosScaled, yPosScaled, 10, Math.PI * 0, Math.PI * 2, false);
    c.fillStyle = '#003399';
    c.fill();
    c.stroke();
    c.closePath();
  };
  
  function drawSun(c) {
    //draw a yellow circle - the sun
    c.beginPath();
    c.arc(0, 0, 30, Math.PI * 0, Math.PI * 2, false);
    c.fillStyle = '#ffcc00';
    c.fill();
    c.stroke();
    c.closePath();
  };
  
  function animate(c, xPosScaled, yPosScaled) {
    requestAnimationFrame(animate);
  
    c.clearRect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
    //if want a black background
    //c.fillRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight); 
    drawSun(c);
    drawEarth(c, xPosScaled, yPosScaled);
  };
  
  function main(c, xPos, yPos, posScale, xVel, yVel, velScale) {
    axis(c);
    var posVelArray = leapfrog(xPos, yPos, posScale, xVel, yVel, velScale);
    var xPosScaled = posVelArray[0];
    var yPosScaled = posVelArray[1];
    var xVelScaled = posVelArray[2];
    var yVelScaled = posVelArray[3];
    animate(c, xPosScaled, yPosScaled);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="solarsys"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>any help would be great!</p>