baniol/canvas_animation.html

## canvas_animation.html
<html>
   <head>
      <style type="text/css">
         /*canvas{ width: 300px; height: 300px;}*/
      </style>
   </head>
   <body>

      <canvas id="canvas" width="300" height="300"></canvas>

      <script type ="application/javascript" language="javascript">

         window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function( /* function */ callback, /* DOMElement */ element) {
                  window.setTimeout(callback, 1000 / 60);
            };
         })();

         var sun = new Image();
         var moon = new Image();
         var earth = new Image();

         init();
         animate();

         function init() {
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            // setInterval(draw, 100);
         }

         function animate() {
            requestAnimFrame(animate);
            draw();
         }

         function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300); // clear canvas

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150, 150);

            // Earth
            var time = new Date();
            ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
            ctx.translate(105, 0);
            ctx.fillRect(0, -12, 50, 24); // Shadow
            ctx.drawImage(earth, -12, -12);

            // Moon
            ctx.save();
            ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
            ctx.translate(0, 28.5);
            ctx.drawImage(moon, -3.5, -3.5);
            ctx.restore();

            ctx.restore();

            ctx.beginPath();
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun, 0, 0, 300, 300);
         }
      </script>
   </body>
</html>
	<html>
	<head>
	<style type="text/css">
	/canvas{ width: 300px; height: 300px;}/
	</style>
	</head>
	<body>

	<canvas id="canvas" width="300" height="300"></canvas>

	<script type ="application/javascript" language="javascript">

	window.requestAnimFrame = (function() {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( /* function / callback, / DOMElement */ element) {
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	var sun = new Image();
	var moon = new Image();
	var earth = new Image();

	init();
	animate();

	function init() {
	sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
	moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
	earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
	// setInterval(draw, 100);
	}

	function animate() {
	requestAnimFrame(animate);
	draw();
	}

	function draw() {
	var ctx = document.getElementById('canvas').getContext('2d');

	ctx.globalCompositeOperation = 'destination-over';
	ctx.clearRect(0, 0, 300, 300); // clear canvas

	ctx.fillStyle = 'rgba(0,0,0,0.4)';
	ctx.strokeStyle = 'rgba(0,153,255,0.4)';
	ctx.save();
	ctx.translate(150, 150);

	// Earth
	var time = new Date();
	ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
	ctx.translate(105, 0);
	ctx.fillRect(0, -12, 50, 24); // Shadow
	ctx.drawImage(earth, -12, -12);

	// Moon
	ctx.save();
	ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
	ctx.translate(0, 28.5);
	ctx.drawImage(moon, -3.5, -3.5);
	ctx.restore();

	ctx.restore();

	ctx.beginPath();
	ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
	ctx.stroke();

	ctx.drawImage(sun, 0, 0, 300, 300);
	}
	</script>
	</body>
	</html>