<div id="canvas">
            <canvas id="canvas-main" width="640px" height="480px"></canvas>
            <canvas id="canvas-sub" width="640px" height="480px"></canvas>
            <canvas id="canvas-interface" width="640px" height="480px"></canvas>
        </div>

	#canvas-main {
	    position:absolute;
	    z-index: 100;
	    left: 0px;
	    top: 0px;
	}
	
	#canvas-sub {
	    position:absolute;
	    z-index: 110;
	    left: 0px;
	    top: 0px;
	}
	
	#canvas-interface {
	    position:absolute;
	    z-index: 1000;
	    left: 0px;
	    top: 0px;
	}

Interface用のCanvasを一番上に作成します、すでにあるCanvasを使っても良いのですがInterface用に1枚作っておいた方が先々応用が利きそうなのでこのようにしています

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

	function CanvasInterface( 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 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;
	            draw_ctx.clearRect( 0, 0, draw_canvas.clientWidth, draw_canvas.clientHeight );
	            draw_ctx.drawImage( img, x, y );
	        }
	        e.preventDefault();
	        return false;
	    }
	}

canvas-interfaceのcanvas.onclickイベント発生時にcanvas-subに画像を書き込みます

参考サイト

1ka2ka.com HTML5.JP
壱目堂本舗