• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML5 Multimedia Canvas</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>canvas 요소에 이미지 그리기</h1>
12
​
13
    <img id="Monalisa" src="/examples/images/img_monalisa.png" alt="모나리자" width="180" height="280">
14
    <p>원본 이미지</p>
15
    <canvas id="drawCanvas" width="200px" height="300px" style="border: 1px solid #993300">
16
        이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
17
    </canvas>
18
    <p><button onclick="drawImage()">이미지 그리기</button></p>
19
​
20
    <script>
21
        function drawImage() {
22
            var paper = document.getElementById("drawCanvas");
23
            var context = paper.getContext("2d");
24
            var srcImg = document.getElementById("Monalisa");
25
            context.drawImage(srcImg, 10, 10);
26
        }
27
    </script>
28
​
29
</body>
30
​
31
</html>