agar3s/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Canvas Background</title>
</head>
<body>
  <header>
    <h1>Hello canvas background</h1>
  </header>
  <section>
    <header>
      <h2>It's amazing how this works</h2>
    </header>
    <article>
      <p>The original article is in <a href="http://updates.html5rocks.com/2012/12/Canvas-driven-background-images">HTML5 Rocks</a>
    </article>
  </section>
  <footer>

  </footer>
</body>
</html>

## script.js
var ctx = document.getCSSCanvasContext('2d', 'animation', 100, 100);
ctx.fillStyle = 'rgb(49,149,137)';
ctx.fillRect(0,0,50,50);
ctx.stroke();

colors= {red:62, green:27, blue:60};
window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
var redMulti = greenMulti = blueMulti = 1;
(function loop(){
  colors.red+=redMulti;
  colors.green+=greenMulti;
  colors.blue+=blueMulti;
  if(colors.red>105){
    redMulti=-1;
  }else if(colors.red<62){
    redMulti=1;
  }

  if(colors.green>244){
    greenMulti=-1;
  }else if(colors.green<27){
    greenMulti=1;
  }
  if(colors.blue>189){
    blueMulti=-1;
  }else if(colors.blue<60){
    blueMulti=1;
  }
  ctx.fillStyle = 'rgb('+colors.red+','+colors.green+','+colors.blue+')';
  ctx.fillRect(0,0,50,50);
  ctx.fillRect(50,50,50,50);
  ctx.fillStyle = 'rgb('+(255-colors.red)+','+(255-colors.green)+','+(255-colors.blue)+')';
  ctx.fillRect(50,0,50,50);
  ctx.fillRect(0,50,50,50);
  ctx.fill();
  window.requestAnimFrame(loop);
})();

## style.css
body {
  background: -webkit-canvas(animation);
  font-size:200%;
}
header {
  margin: 0 auto;
  text-align: center;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Canvas Background</title>
	</head>
	<body>
	<header>
	<h1>Hello canvas background</h1>
	</header>
	<section>
	<header>
	<h2>It's amazing how this works</h2>
	</header>
	<article>
	<p>The original article is in <a href="http://updates.html5rocks.com/2012/12/Canvas-driven-background-images">HTML5 Rocks</a>
	</article>
	</section>
	<footer>

	</footer>
	</body>
	</html>
	var ctx = document.getCSSCanvasContext('2d', 'animation', 100, 100);
	ctx.fillStyle = 'rgb(49,149,137)';
	ctx.fillRect(0,0,50,50);
	ctx.stroke();

	colors= {red:62, green:27, blue:60};
	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	function( callback ){
	window.setTimeout(callback, 1000 / 60);
	};
	})();
	var redMulti = greenMulti = blueMulti = 1;
	(function loop(){
	colors.red+=redMulti;
	colors.green+=greenMulti;
	colors.blue+=blueMulti;
	if(colors.red>105){
	redMulti=-1;
	}else if(colors.red<62){
	redMulti=1;
	}

	if(colors.green>244){
	greenMulti=-1;
	}else if(colors.green<27){
	greenMulti=1;
	}
	if(colors.blue>189){
	blueMulti=-1;
	}else if(colors.blue<60){
	blueMulti=1;
	}
	ctx.fillStyle = 'rgb('+colors.red+','+colors.green+','+colors.blue+')';
	ctx.fillRect(0,0,50,50);
	ctx.fillRect(50,50,50,50);
	ctx.fillStyle = 'rgb('+(255-colors.red)+','+(255-colors.green)+','+(255-colors.blue)+')';
	ctx.fillRect(50,0,50,50);
	ctx.fillRect(0,50,50,50);
	ctx.fill();
	window.requestAnimFrame(loop);
	})();
	body {
	background: -webkit-canvas(animation);
	font-size:200%;
	}
	header {
	margin: 0 auto;
	text-align: center;
	}