var canvas = document.querySelector("canvas"),
	ctx = canvas.getContext("2d"),
  toAngle = Math.PI/180,
	r = 0,
	g = 0,
	b = 0;

canvas.width = 450;
canvas.height = 450;

ctx.translate(225,225);
ctx.lineWidth = 60;
ctx.globalCompositeOperation = "lighter";
ctx.shadowBlur = 2;

var last = new Date().getTime();

function draw() {
  var now = new Date().getTime(),
  	delta = (now - last)/20;

  window.requestAnimationFrame(draw);
  
  ctx.clearRect(-225,-225,450,450);
  ctx.save();
  
  ctx.rotate(r*toAngle)
  ctx.shadowColor = "#F00";
  ctx.strokeRect(-120,-120,240,240);

  ctx.rotate((g-r)*toAngle)
  ctx.shadowColor = "#0F0";
  ctx.strokeRect(-120,-120,240,240);

  ctx.rotate((b-g)*toAngle)
  ctx.shadowColor = "#00F";
  ctx.strokeRect(-120,-120,240,240);

  ctx.restore();

  r += delta;
  g += delta * 2;
  b += delta * 3;
  last = now;
}

draw();


/** just the about-button **/
  window.utils.about({
    user: {
      name: "bbuecherl",
      twitter: "bbuecherl",
      github: "bbuecherl",
      pinterest: "bbuecherl",
      stackoverflow: "995320/bbuecherl",
      url: "http://bbuecherl.de"
    },
    title: "rgb spinning rectangle",
    info: "Just experimenting with Canvas globalCompositeOperation. <a href='http://31.media.tumblr.com/tumblr_mbdqftlwkZ1r2geqjo1_500.gif' target='_blank'>Inspired by this gif</a>"
  });