Canvas operations

It's used the 'globalCompositeOperation' to cut two graphs.

by MICHI CHEN

HTML

<!--Original source http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/-->
<canvas id="tempCanvas" width="600" height="400" style="display:none;"></canvas>
<canvas id="mainCanvas" width="600" height="400"></canvas>

JavaScript

$(function(){
  var tempCtx=$('#tempCanvas')[0].getContext('2d');
  var temp=$('#tempCanvas');
  var bCtx=$('#mainCanvas')[0].getContext('2d');
  var bCtxW=$('#mainCanvas').width();
  var bCtxH=$('#mainCanvas').height();
  var sW=50;
  var cR=30;
  var offset=45;
  var operationOffset=140;
  var i=[];
  
  i.push('source-over');
  i.push('source-in');
  i.push('source-out');
  i.push('source-atop');
  i.push('destination-over');
  i.push('destination-in');
  i.push('destination-out');
  i.push('destination-atop');
  i.push('lighter');
  i.push('darker');
  i.push('xor');
  i.push('copy');
  console.log(i);
  
  for(var n=0; n < i.length; n++){
    tempCtx.save();
    tempCtx.clearRect(0,0,bCtxW,bCtxH);
    
    tempCtx.beginPath();
    tempCtx.rect(0,0,sW,sW);
    tempCtx.fillStyle="#62EACB";
    tempCtx.fill();
    
    tempCtx.globalCompositeOperation=i[n];
    console.log(i[n]);
    
    tempCtx.beginPath();
    tempCtx.arc(offset,offset,cR,0,2*Math.PI);
    tempCtx.fillStyle='#E177EA';
    tempCtx.fill();
    tempCtx.restore();
    
    tempCtx.font='14px arial';
    tempCtx.fillStyle='#666';
    tempCtx.fillText(i[n],0,sW+45);
    
    if(n > 0){
    	if(n % 4 === 0){
      	bCtx.translate(operationOffset*-3,operationOffset);
      }else{
      	bCtx.translate(operationOffset,0);
      }
    }
    bCtx.drawImage(tempCanvas,0,0);
  }
});