Scusa non so perché ma se metto codice html mi perde la formattazione, comunque eccolo:

codice:
<script>


var sourcecanvas; // video
var copy;
var copycanvas;
var draw;


var cw=450;
var ch=401;


var TILE_WIDTH = 5;
var TILE_HEIGHT = 5;


var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var PAINTRECT  = {x:0, y:0, width:cw, height:ch};


var constRange = 180;
var delay = 10;
var count = 0;


function loadCanvas() {


   if(sourcecanvas.getContext) {
      var ctx = sourcecanvas.getContext('2d');
      var img = new Image();   // Create new Image object  
      img.onload = function(){  
         var siw=cw/img.width;
         var sih=ch/img.height;
         var iw=siw*img.width;
         var ih=sih*img.height;
         ctx.drawImage(img,(0.5*cw)-(0.5*iw),(0.5*ch)-(0.5*ih));


         //var siw=cw/img.width;
         //var sih=ch/img.height;
         //alert('siw='+siw);
         //ctx.scale(siw,sih);
       };


       // Set source path  
       var r = Math.ceil(5 * Math.random());
       r=5;
       if (r==0) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/godownload.jpg'; 
       }
       if (r==1) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gosell.jpg';
       }
       if (r==2) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/logo_final_2007_rgb_big.jpg';
       }
       if (r==3) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gomedia.jpg'; 
       }
       if (r==4) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gotv.jpg'; 
       }
       if (r>4) { 
          img.src = 'http://mattiabuffetti.com/wp-content/themes/Personal/images/wallpaper.png';
       }
    }
}


function init(){
   sourcecanvas = document.getElementById('sourcecanvas');
   copycanvas = document.getElementById('sourcecopy');
   copy = copycanvas.getContext('2d');
   outputcanvas = document.getElementById('output');
   draw = outputcanvas.getContext('2d');
   loadCanvas();
   setInterval("processFrame()", delay);
}


function animation(){
     if (count>2) {
         count = 0;
     }
     count=count+1;
}


var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;


function processFrame(){


    var debugStr = debugStr + "debug";


    // init 
    if(SOURCERECT.width == 0){
         SOURCERECT = {x:0,y:0,width:PAINTRECT.width,height:PAINTRECT.height};
         //loadCanvas(); // needed in iPhone
         createTiles();
   }


   copy.drawImage(sourcecanvas, 0, 0);


   draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);


   for(var i=0; i<tiles.length; i++){
        var tile = tiles[i];
        if(tile.force > 0.0001){
            //expand
            tile.moveX *= tile.force;
            tile.moveY *= tile.force;
            tile.moveRotation *= tile.force;
            tile.currentX += tile.moveX;
            tile.currentY += tile.moveY;
            tile.rotation += tile.moveRotation;
            tile.rotation %= 360;
            tile.force *= 0.9;
            if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
                tile.moveX *= -1;
            }
            if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
                tile.moveY *= -1;
            }
        }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
            //contract
            var diffx = (tile.originX-tile.currentX)*0.2;
            var diffy = (tile.originY-tile.currentY)*0.2;
            var diffRot = (0-tile.rotation)*0.2;
            
            if(Math.abs(diffx) < 0.5){
                tile.currentX = tile.originX;
            }else{
                tile.currentX += diffx;
            }
            if(Math.abs(diffy) < 0.5){
                tile.currentY = tile.originY;
            }else{
                tile.currentY += diffy;
            }
            if(Math.abs(diffRot) < 0.5){
                tile.rotation = 0;
            }else{
                tile.rotation += diffRot;
            }
        }else{
            tile.force = 0;
        }
        draw.save();
        draw.translate(tile.currentX, tile.currentY);
        draw.rotate(tile.rotation*RAD);
        draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
        draw.restore();
    }
    if(debug){
        //debug = false;
        document.getElementById('trace').innerHTML = debugStr;
    }
}


function Tile(){
    this.originX = 0;
    this.originY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.rotation = 0;
    this.force = 0;
    this.z = 0;
    this.moveX= 0;
    this.moveY= 0;
    this.moveRotation = 0;
    
    this.videoX = 0;
    this.videoY = 0;
}




function createTiles(){
    var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
    var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
    var y=0;
    while(y < SOURCERECT.height){
        var x=0;
        while(x < SOURCERECT.width){
            var tile = new Tile();
            tile.videoX = x;
            tile.videoY = y;
            tile.originX = offsetX+x;
            tile.originY = offsetY+y;
            tile.currentX = tile.originX;
            tile.currentY = tile.originY;
            tiles.push(tile);
            x+=TILE_WIDTH;
        }
        y+=TILE_HEIGHT;
    }
}


function explode(x, y){
    for(var i=0; i<tiles.length; i++){


        var tile = tiles[i];
        
        var xdiff = tile.currentX-x;
        var ydiff = tile.currentY-y;
        var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);
        
        var randRange = constRange+(Math.random()*30);
        var range = randRange-dist;
        var force = 3*(range/randRange);
        if(force > tile.force){
            tile.force = force;
            var radians = Math.atan2(ydiff, xdiff);
            tile.moveX = Math.cos(radians);
            tile.moveY = Math.sin(radians);
            tile.moveRotation = 0.5-Math.random();
        }
    }
    tiles.sort(zindexSort);
    processFrame();
}


function zindexSort(a, b){
    return (a.force-b.force);
}




function dropBomb(evt, obj){
    var posx = 0;
    var posy = 0;
    var e = evt || window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var canvasX = posx-obj.offsetLeft;
    var canvasY = posy-obj.offsetTop;
    explode(canvasX, canvasY);
    animation();
}


</script>
codice:
<div style="display:none">    
        <canvas id="sourcecanvas" width="500" height="450"></canvas>    
        <canvas id="sourcecopy" width="500" height="450"></canvas>
</div>
<canvas id="output" width="450" height="401" onmousedown="dropBomb(event, this)" style="cursor: pointer;"></canvas>