baniol/canvas_animation_pattern.html

## canvas_animation_pattern.html
<html>
   <head>
      <style type="text/css">
      canvas{ border:#666 1px solid;}
      </style>
   </head>
   <body>

      <script type ="application/javascript" language="javascript">
          // requestAnim shim layer by Paul Irish
         window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function( /* function */ callback, /* DOMElement */ element) {
                  window.setTimeout(callback, 1000 / 60);
            };
         })();

          // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

         var canvas, context, toggle;

         init();
         animate();

         function init() {

            canvas = document.createElement('canvas');
            canvas.width = 512;
            canvas.height = 512;

            context = canvas.getContext('2d');

            document.body.appendChild(canvas);

         }

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

         }

         function draw() {

            var time = new Date().getTime() * 0.002;
            var x = Math.sin(time) * 192 + 256;
            var y = Math.cos(time * 0.9) * 192 + 256;
            toggle = !toggle;

            context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
            context.beginPath();
            context.arc(x, y, 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();

         }
      </script>
   </body>
</html>
	<html>
	<head>
	<style type="text/css">
	canvas{ border:#666 1px solid;}
	</style>
	</head>
	<body>

	<script type ="application/javascript" language="javascript">
	// requestAnim shim layer by Paul Irish
	window.requestAnimFrame = (function() {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( /* function / callback, / DOMElement */ element) {
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

	var canvas, context, toggle;

	init();
	animate();

	function init() {

	canvas = document.createElement('canvas');
	canvas.width = 512;
	canvas.height = 512;

	context = canvas.getContext('2d');

	document.body.appendChild(canvas);

	}

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

	}

	function draw() {

	var time = new Date().getTime() * 0.002;
	var x = Math.sin(time) * 192 + 256;
	var y = Math.cos(time * 0.9) * 192 + 256;
	toggle = !toggle;

	context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
	context.beginPath();
	context.arc(x, y, 10, 0, Math.PI * 2, true);
	context.closePath();
	context.fill();

	}
	</script>
	</body>
	</html>