©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML5 Multimedia Canvas</title>
</head>

<body>

	<h1>canvas 요소에 이미지 그리기</h1>

	<img id="Monalisa" src="/examples/images/img_monalisa.png" alt="모나리자" width="180" height="280">
	<p>원본 이미지</p>
	<canvas id="drawCanvas" width="200px" height="300px" style="border: 1px solid #993300">
		이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
	</canvas>
	<p><button onclick="drawImage()">이미지 그리기</button></p>

	<script>
		function drawImage() {
			var paper = document.getElementById("drawCanvas");
			var context = paper.getContext("2d");
			var srcImg = document.getElementById("Monalisa");
			context.drawImage(srcImg, 10, 10);
		}
	</script>

</body>

</html>