function drawCanvas7() {
  var canvas = document.getElementById('canvas7');
  if (canvas && canvas.getContext) {
    var ctx   = canvas.getContext('2d');        // Get the context : 2 dimensions
    var time  = new Date();                     // Get the current date information
    var space = new Image();                    // Declare the space image
    var sun   = new Image();                    // Declare the sun image
    var earth = new Image();                    // Declare the earth image
    var moon  = new Image();                    // Declare the moon image
    space.src = './images/canvas/space.png';    // Set the space source image
    sun.src   = './images/canvas/sun.png';      // Set the sun source image
    earth.src = './images/canvas/earth.png';    // Set the earth source image
    moon.src  = './images/canvas/moon.png';     // Set the moon source image
    ctx.globalCompositeOperation = 'destination-over';
    ctx.clearRect(0, 0, 673, 673);              // Clear the canvas
    ctx.save();                                 // Save the context
      defineSunPositionOnOrbite(ctx);           // Define sun position on orbite
      createEarthOrbite(ctx);                   // Create the earth orbite around sun
      defineEarthPositionOnOrbite(ctx, time);   // Define earth position on orbite
      createMoonOrbite(ctx);                    // Create the moon orbite around earth
      createEarthShadow(ctx);                   // Create the earth shadow
      ctx.save();                               // Save the context
        createMoonShadow(ctx, time);            // Create the moon shadow
      ctx.restore();                            // Restore the context
      ctx.save();                               // Save the context
        createEarth(ctx, earth, time);          // Create the earth
      ctx.restore();                            // Restore the context
      ctx.save();                               // Save the context
        createMoon(ctx, moon, time);            // Create the moon
      ctx.restore();                            // Restore the context
    ctx.restore();                              // Restore the context
    ctx.save();                                 // Save the context
      defineSunPositionOnOrbite(ctx);           // Define sun position on orbite
      createSun(ctx, sun, time);                // Create the sun
    ctx.restore();                              // Restore the context
    ctx.drawImage(space, 0, 0, 673, 673);       // Draw the space
    setInterval('drawCanvas7()', 100);          // Refresh the canvas every 100 ms
  }
}

function defineSunPositionOnOrbite(ctx) {
  ctx.translate(336.5, 336.5);                  // Go on the middle of the screen
}

function defineEarthPositionOnOrbite(ctx, time) {
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
              ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(270,0);                         // Set orbite point for the earth
}

function defineMoonPositionOnOrbite(ctx, time) {
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() +
              ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(25, 0);                         // Set orbite point for the moon
}

function createEarthOrbite(ctx) {
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';      // Set the stroke to blue 40% opacity
  ctx.beginPath();                              // Open the path
  ctx.arc(0, 0, 270, 0, Math.PI*2, false);      // Create the earth orbite
  ctx.closePath();                              // Close the path
  ctx.stroke();                                 // Draw a circle around the sun
}

function createMoonOrbite(ctx) {
  ctx.beginPath();                              // Open the path
  ctx.arc(0, 0, 25, 0, Math.PI*2, false);       // Create the moon orbite
  ctx.closePath();                              // Close the path
  ctx.stroke();                                 // Draw a circle around the earth
}

function createEarthShadow(ctx) {
  ctx.fillStyle = 'rgba(0,0,0,0.7)';            // Set the fill to black 70% opacity
  ctx.fillRect(0, -12, 35, 24);                 // Fill the earth shadow rectangle
}

function createMoonShadow(ctx, time) {
  defineMoonPositionOnOrbite(ctx, time);        // Define moon position on orbite
  ctx.fillStyle = 'rgba(0,0,0,0.5)';            // Set the fill to black 50% opacity
  ctx.rotate( (2*Math.PI) - ( ((2*Math.PI)/6)*time.getSeconds() +
                              ((2*Math.PI)/6000)*time.getMilliseconds() ) );
  ctx.fillRect(0, -4.5, 25, 9);                 // Fill the moon shadow rectangle
}

function createSun(ctx, sun, time) {
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
              ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.drawImage(sun, -336.5, -336.5);           // Draw the sun
}

function createEarth(ctx, earth, time) {
  ctx.rotate( ((2*Math.PI)/2)*time.getSeconds() +
              ((2*Math.PI)/2000)*time.getMilliseconds() );
  ctx.drawImage(earth, -12, -12);               // Draw the earth
}

function createMoon(ctx, moon, time) {
  defineMoonPositionOnOrbite(ctx, time);        // Define moon position on orbite
  ctx.drawImage(moon, -4.5, -4.5);              // Draw the moon
}