Htmlは「Canvasをクリックして立ち絵を表示」で使用した方法で行います。

	trans( "canvas-main", "canvas-sub", "canvas-interface" );

	function trans( srcID, dstID, interfaceID ) {
	    var src_canvas = document.getElementById( srcID );
	    var dst_canvas = document.getElementById( dstID );
	    var inf_canvas = document.getElementById( interfaceID );
	    //------------------------------------------------------------------------------
	    if( ! src_canvas || ! src_canvas.getContext ) return false;
	    if( ! dst_canvas || ! dst_canvas.getContext ) return false;
	    if( ! inf_canvas || ! inf_canvas.getContext ) return false;
	    //------------------------------------------------------------------------------
	    var src_ctx = src_canvas.getContext( '2d' );
	    var dst_ctx = dst_canvas.getContext( '2d' );
	    //------------------------------------------------------------------------------
	    //  デフォルト画像の読み込み
	    var img_src      = new Image;
	    img_src.src      = "img/img0012.jpg?" + new Date().getTime();;
	    img_src.onload  = function( ) {
	        dst_ctx.clearRect( 0, 0, dst_ctx.width, dst_ctx.height );
	        dst_ctx.drawImage( img_src, 0, 0 );
	    }
	    var x, y, a, pos;
	    //------------------------------------------------------------------------------
	    //  クリックイベントを登録
	    inf_canvas.onclick = function( e ) {
	        var mask    = new Array( );
	        var img      = new Image;
	        img.src      = "img/001.png?" + new Date().getTime();;
	        img.onload  = function( ) {
	            //------------------------------------------------------------------------------
	            //  ルールファイル情報を配列に保存
	            src_ctx = src_canvas.getContext( '2d' );
	            src_ctx.drawImage( img, 0, 0 );
	            var data = src_ctx.getImageData( 0, 0, 640, 480 );
	            for( y = 0; y < src_canvas.height; y++ ) {
	                for( x = 0; x < src_canvas.width; x++ ) {
	                    pos   = y * ( src_canvas.width * 4 ) + ( x * 4 );
	                    a = Math.floor( ( data.data[pos + 0] + data.data[pos + 1] + data.data[pos + 2] ) / 3 );
	                    mask.push( a );
	                }
	            }
	            //------------------------------------------------------------------------------
	            //  描画イメージを読み込む
	            img.src      = "img/img0006.jpg?" + new Date().getTime();;
	            img.onload  = function( ) {
	                src_ctx.drawImage( img, 0, 0 );
	                var data_src    = src_ctx.getImageData( 0, 0, src_canvas.width, src_canvas.height );
	                var data_dst    = dst_ctx.getImageData( 0, 0, dst_canvas.width, dst_canvas.height );
	                var alpha  = 0;
	                //------------------------------------------------------------------------------
	                fadeID  = setInterval( function( ) {
	                    for( y = 0; y < src_canvas.height; y++ ) {
	                        for( x = 0; x < src_canvas.width; x++ ) {
	                            if( mask[y * src_canvas.width + x] == alpha ) {
	                                pos   = y * ( src_canvas.width * 4 ) + ( x * 4 );
	                                data_dst.data[pos + 0] = data_src.data[pos + 0];
	                                data_dst.data[pos + 1] = data_src.data[pos + 1];
	                                data_dst.data[pos + 2] = data_src.data[pos + 2];
	                                data_dst.data[pos + 3] = data_src.data[pos + 3];
	                            }
	                        }
	                    }
	                    dst_ctx.putImageData(data_dst, 0, 0);
	                    if( alpha == 255 ) { clearInterval( fadeID ); }
	                    alpha++;
	                }, 15 );
	            }
	        }
	        e.preventDefault();
	        return false;
	    }
	    //------------------------------------------------------------------------------
	};

とりあえず、遅いです、使い物にならないくらい遅いです:p
多分カウント値alphaを１ずつ足しているからなので、４とかにすると単純に４倍の速度になるはずです、そのかわり荒いです…:p
トランジションの画像は吉里吉里ダウンロードページより使用させていただきました。
グレースケールのPNGなので、２４ビットPNGに変更してから使ってください。

参考サイト

tech.kayac.com