CodePen

HTML

            
              Blend mode: <body>
<select id="compmode">
  <option value="difference">difference</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="color-dodge">color-dodge</option>
  <option value="color-burn">color-burn</option>
  <option value="hard-light">hard-light</option>
  <option value="soft-light">soft-light</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>

<canvas id="canvas"></canvas>
<br/>
<small>Credit <a href="http://www.flickr.com/photos/scjn/4494613395/"> Colorful Pinwheel by Candie_N</a></small>
</body>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              canvas {
   width: 800px;
   height: 681px;
   display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 1024;
canvas.height = 681;

var angle = 0;

var increase = false;
var offset = 160;

canvas.addEventListener("mouseover", function(){increase = true; }, false);
canvas.addEventListener("mouseout", function(){increase = false; }, false);

var img = document.createElement('img');
img.src = "http://farm3.staticflickr.com/2731/4494613395_ffcd3ffa6a_b.jpg";

function drawCircle(deg){
	ctx.arc(512- offset* Math.cos(deg / 180 * Math.PI), 340 - offset * Math.sin(deg / 180 * Math.PI), 200, 0, Math.PI*2, true); 
	ctx.closePath();
    ctx.fill();
	ctx.stroke();
}

function step() {
if(increase && offset < 600)
    offset += 5;
else
if(!increase && offset > 160)
    offset -= 5;
	
ctx.clearRect (0,0,500,500);
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(img, 0, 0);
ctx.globalCompositeOperation = compmode.value;
ctx.fillStyle = 'rgb(255,0,255)';
ctx.strokeStyle = 'rgb(0,0,0)';

ctx.beginPath();
drawCircle(angle);
ctx.fillStyle = 'rgb(0,255,255)';
ctx.beginPath();
drawCircle(angle+120);
ctx.fillStyle = 'rgb(255,255,0)';
ctx.beginPath();
drawCircle(angle+240);

angle += .5;
	requestAnimationFrame(step);
}

requestAnimationFrame(step);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................