Draw Image in Canvas in HTML5

Create new folder named images. Copy images need in demo to this folder

<html>
	<head>
		<title>Draw Image in Canvas in HTML5</title>
	</head>
	<body>

		<canvas id="mycanvas" width="300" height="300" style="border: 1px solid black;"></canvas>
		<br>
		<input type="button" value="Draw Image" onclick="drawImage()">

		<script type="text/javascript">

			function drawImage() {
				var mycanvas = document.getElementById('mycanvas');
				var ctx = mycanvas.getContext('2d');
				var img = new Image();
				img.src = 'images/thumb3.gif';
				img.onload = function(){
					ctx.drawImage(img, 20, 20);
				};
			}

		</script>

	</body>
</html>

Open site in browser and display as below: