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

	put( "img0012.jpg", "canvas-main" );
	CanvasInterface2( "canvas-interface", "img/yukiho.png" );

	function CanvasInterface2( id, drawid, file ) {
	    /* canvas オブジェクトの取得 */
	    var canvas = document.getElementById( id );
	    /* canvas要素 ＆ ブラウザ未対応の対処 */
	    if( ! canvas || ! canvas.getContext ) return false;
	    /* 2D コンテキスト */
	    var ctx = canvas.getContext( '2d' );
	    /*  Mouse Click イベントを取得    */
	    canvas.onclick = function( e ) {
	        var   fadeID = -1;
	        var alpha = 0.0;
	        var img      = new Image;
	        img.src      = file;
	        img.onload  = function( ) {
	            var draw_canvas = document.getElementById( drawid );
	            var draw_ctx = canvas.getContext( '2d' );
	            var x = ( draw_canvas.clientWidth - img.width) / 2;
	            var y = ( draw_canvas.clientHeight - img.height ) / 2;
	            /* Interval Timer を使用してフェードをさせる    */
	            fadeID  = setInterval( function( ) {
	                if( Math.floor( alpha ) == 1 ) { clearInterval( fadeID ); }
	                alpha += 0.05;
	                draw_ctx.globalAlpha = alpha; // Canvas の alpha値を変更
	                draw_ctx.clearRect( 0, 0, draw_canvas.clientWidth, draw_canvas.clientHeight );
	                draw_ctx.drawImage( img, x, y );
	            }, 15 );
	        }
	        e.preventDefault();
	        return false;
	    }
	}

基本的に「Canvasをクリックして立ち絵を表示」と同じやり方です。
画像表示方法をsetIntervalを使用して１５ミリ秒毎にAlpha値を上げていきます
※注意する点として、フェード終了時必ずclearIntervalでスレッドを終了してください。

参考サイト

HTML5.JP
壱目堂本舗