js clipping wiki girl

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
    
	<canvas id="canvas" resize></canvas>
    <canvas id="scratch"></canvas>
	<script src="http://labrador.is/media/paper.js"></script>
	<script src="http://sole.github.com/tween.js/build/tween.min.js"></script>
	<script src="http://sole.github.com/tween.js/examples/js/RequestAnimationFrame.js"></script>
	<script type="text/paperscript" canvas="canvas">
      function imgClip(image, x, y, radius) {
        var scratchCanvas = document.getElementById('scratch');
        scratchCanvas.width = radius*2;
        scratchCanvas.height = radius*2;
        var scratchCtx = scratchCanvas.getContext('2d');
        
        //drawing code
        scratchCtx.clearRect(0, 0, scratchCanvas.width, scratchCanvas.height);
        scratchCtx.globalCompositeOperation = 'source-over'; //default
        //Do whatever drawing you want. In your case, draw your image.
        scratchCtx.drawImage(image, 0,0);
        
        
        //As long as we can represent our clipping region as a single path, 
        //we can perform our clipping by using a non-default composite operation.
        //You can think of destination-in as "write alpha". It will not touch
        //the color channel of the canvas, but will replace the alpha channel.
        //(Actually, it will multiply the already drawn alpha with the alpha
        //currently being drawn - meaning that things look good where two anti-
        //aliased pixels overlap.)
        //
        //If you can't represent the clipping region as a single path, you can
        //always draw your clip shape into yet another scratch canvas.
        
        scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
        scratchCtx.globalCompositeOperation = 'destination-in';
        scratchCtx.beginPath();
        scratchCtx.arc(x, y, radius, 0, 2 * Math.PI, true);
        scratchCtx.closePath();
        scratchCtx.fill(); 
        
        return scratchCanvas;
 ...