将图像放在画布上

Question

我有一个从HTML5的视频标签中提取的画布。如何将图像放置在已有其他图像的画布上，

video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
    }

  startbutton.addEventListener('click', function(ev){
  	takepicture();
    ev.preventDefault();
  }, false);

<div id="container">
		<video id="video"></video>
		
		<canvas id="canvas"></canvas>
		<button id="startbutton">Take photo</button>
		
	</div>

<div class="container">

	<span>
		<img src="http://www.pageresource.com/clipart/clipart/fashion/hats/Panama_20hat.png"/>
		<p>Image 1</p>
	</span>
	<span>
		<img src="http://www.pageresource.com/clipart/clipart/fashion/hats/hat-01.png"/>
		<p>Image 2</p>
	</span>
	<span>
	
	</span>
	
</div>

编辑1：画布包含一个图像，该图像作为视频元素的截图。这是一个div class =容器，几乎没有图像。当用户选择/单击特定图像时，应将其放置在已包含图像的画布上（从视频元素截取屏幕截图）。

如何将用户选择的图像放在画布上的图像上？ （它不是替代品，而是像用户脸上的帽子一样 - 在用户脸上放置选定的帽子截图）