Javascript Canvas 이미지 그리기 방법 1: copy

by

Javascript Canvas 이미지 그리기 방법 중 원본 이미지를 그대로 캔버스에 그리는 방법을 알아보겠습니다.

Javascript Canvas 이미지 그리기(copy)

코드를 통해서 간단히 사용 방법을 알아보도록 하겠습니다. 코드에서 사용한 캔버스의 크기는 200 x 300입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>캔버스에 그리기</title>
  <script>
    function drawImageToCanvas() {
      var image = document.getElementById("image");
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');
      ctx.drawImage(image, 20, 20);
    }

    window.onload = function() {
      drawImageToCanvas();
    };
  </script>
</head>
<body>

<img id="image" src="captured.png">
<canvas id="canvas" width="200" height="300" style="border: 1px solid red;"></canvas>

</body>
</html>
HTML

위의 코드를 실행한 결과는 아래와 같습니다. 좌측은 img 태그로 표현된 원본 이미지이며 우측의 빨간 상자로 표시한 것은 캔버스입니다. 캔버스의 (20, 20)부터 원본 이미지가 그려진 것을 확인할 수 있습니다. 캔버스의 크기가 원본 이미지보다 작기 때문에 캔버스 영역 밖으로 넘어가는 부분들은 잘려나가고 나머지 영역만 캔버스에 그려집니다.

그림 1. Javascript Canvas 이미지 그리기 방법(copy) 실행 결과
그림 1. Javascript Canvas 이미지 그리기 방법(copy) 실행 결과

라인 11에서 이용한 문법은 아래와 같습니다.

drawImage(image, dx, dy)

파라미터를 설명하겠습니다. d로 시작하는 dx, dy는 destination을 의미하며 그릴 대상을 의미합니다. 여기에서는 캔버스를 의미합니다.

  • image: 원본 이미지 객체
  • dx: 캔버스에 그리기 시작할 x 좌표
  • dy: 캔버스에 그리기 시작할 y 좌표

이 방법으로는 원본을 그대로 축소도 확대도 하지 않고 그대로 복사하게 됩니다.

관련 자료

MDN의 CanvasRenderingContext2D: drawImage() 메서드 문서를 참고했습니다.

같이 읽으면 좋은 글

Leave a Comment