Anonymous

<html>
<head>
<script>
function doWide() {
  var c = document.getElementById("theCanvas").getContext('2d');
  var i = document.getElementById("wide");
  c.drawImage(i, 0, 0, 50, 50);
}
function doTall() {
  var c = document.getElementById("theCanvas").getContext('2d');
  var i = document.getElementById("tall");
  c.drawImage(i, 0, 0, 50, 50);
}
</script>
</head>
<body>
<img src="wide.png" id="wide" style="border: 1px solid blue;"/><br/>&nbsp;<br/>
<img src="tall.png" id="tall" style="border: 1px solid blue;"/>
<canvas id="theCanvas" width="300" height="300" style="border: 1px solid blue;"></canvas><br/>
<a href="#" onclick="doWide()">wide</a><br/>
<a href="#" onclick="doTall()">tall</a>
</body>
</html>