HTML5 캔버스에서 이미지를 사용하는 방법은 무엇입니까?

HTML5

다음 코드를 실행하여 HTML Canvas에서 이미지를 사용하는 방법을 배울 수 있습니다. 여기서 이미지는 이미지 또는 캔버스 개체에 대한 참조입니다. x와 y는 이미지가 배치되어야 하는 대상 캔버스의 좌표를 형성합니다.

예시

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         function drawShape() {
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

               // Draw shapes
               var img = new Image();
               img.src = '/images/backdrop.jpg';
               img.onload = function() {
                  ctx.drawImage(img,0,0);
                  ctx.beginPath();
                  ctx.moveTo(30,96);
                  ctx.lineTo(70,66);
                  ctx.lineTo(103,76);
                  ctx.lineTo(170,15);
                  ctx.stroke();
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>