캔버스 이미지 그리기 및 그림판 만들기

송기영개발잘하고싶다·2024년 6월 12일

cavas 이미지 캔버스

캔버스

목록 보기

4/8

실습

이미지 그리기

캔버스에서 이미지를 그리는 방법은 자바스크립트에서 이미지 객체를 생성하여 이미지가 로딩이 됬을때 그리는 방법이 존재한다.

	const canvas = document.querySelector(".canvas");
    const context = canvas.getContext("2d");

    // 이미지 객체를 생성 두가지 모두 사용 가능함
    // const imgElem = document.createElement('img');
    const imgElem = new Image();
    imgElem.src = "../images/ilbuni1.png";

    // 이미지가 로딩이 완료된 후에 그려야함
    imgElem.addEventListener("load", () => {
    	// 이미지소스, x위치, y위치
    	context.drawImage(imgElem, 50, 50);

        // 이미지소스, x위치, y위치, 가로크기, 세로크기
        context.drawImage(imgElem, 50, 50, 70, 120);

        // 이미지소스, 소스x위치, 소스y위치, 소스가로크기, 소스세로크기, ,x위치, y위치, 가로크기, 세로크기
        // 이미지를 잘라서 표현할때 사용함
        context.drawImage(imgElem, 100, 100, 200, 200, 0, 0, 100, 100);
      });

drawImage함수의 인자의 개수에 따라서 적용되는 값이 달라지는데 자세한 내용은 MDN를 확인하면 된다

간단한 그림판 만들기

마우스 드래그 할 때 선 그리기

그림판을 만들기전에 마우스를 누르면 선을 그리는 방법을 소개하고자 한다.
아래 1분 코딩님의 강의에서는 layerX, layerY를 사용했지만 MDN문서를 찾아보니 더이상 호환하지 않음으로 프로덕션에서 사용하지 말라고 하여 offsetX, offsetY가 마우스의 현재 위치를 제대로 표시해줘서 offset을 사용했다.

자세한 내용은 링크에서 확인 할 수 있다.

      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");

      // true일때만 그리기
      let isDrawingMode = false;

      const moveHandler = (event) => {
        if (!isDrawingMode) return;

        context.beginPath();
        // clientX, clientY는 브라우저의 왼쪽위를 기준으로 그림
        context.arc(event.offsetX, event.offsetY, 10, 0, Math.PI * 2, false);
        context.fill();
      };

      const downHandler = () => {
        isDrawingMode = true;
      };

      const upHandler = () => {
        isDrawingMode = false;
      };

      // 원하는 위치를 마우스를 클릭했을때 도형을 그리기
      canvas.addEventListener("mousedown", downHandler);
      canvas.addEventListener("mouseup", upHandler);
      canvas.addEventListener("mousemove", moveHandler);

그림판 만들기

다음 화면과 같이 그림판을 만든다.

소스코드

<body>
    <h1>Image</h1>
    <canvas class="canvas" width="600" height="400"
      >이 브라우저는 캔버스를 지원하지 않습니다.</canvas
    >
    <div class="control">
      <button class="color-btn" data-type="color" data-color="black"></button>
      <button class="color-btn" data-type="color" data-color="red"></button>
      <button class="color-btn" data-type="color" data-color="green"></button>
      <button class="color-btn" data-type="color" data-color="blue"></button>
      <button class="image-btn" data-type="image"></button>
    </div>

    <button class="save-btn">이미지저장</button>
    <div class="result-image"></div>

    <script>
      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");
      const control = document.querySelector(".control");
      const savebtn = document.querySelector(".save-btn");
      const resultImage = document.querySelector(".result-image");
      let colorVal = "black";

      const imgElem = new Image();
      imgElem.src = "../images/ilbuni2.png";

      // true일때만 그리기
      let isDrawingMode = false;
      // brush가 color면 도형 그리고 image면 그림 그리고
      let brush = "color";

      const moveHandler = (event) => {
        if (!isDrawingMode) return;

        // clientX, clientY는 브라우저의 왼쪽위를 기준으로 그림
        if (brush === "color") {
          context.beginPath();
          context.arc(event.offsetX, event.offsetY, 10, 0, Math.PI * 2, false);
          context.fill();
        } else {
          context.drawImage(imgElem, event.offsetX, event.offsetY, 50, 50);
        }
      };

      const downHandler = () => {
        isDrawingMode = true;
      };

      const upHandler = () => {
        isDrawingMode = false;
      };

      const setColor = (event) => {
        brush = event.target.getAttribute("data-type");
        colorVal = event.target.getAttribute("data-color");
        context.fillStyle = colorVal;
      };

      // 캔버스 화면 이미지로 저장하기
      const createImage = () => {
        const url = canvas.toDataURL("image/png");
        const imgElem = new Image();
        imgElem.src = url;
        resultImage.appendChild(imgElem);
      };

      // 원하는 위치를 마우스를 클릭했을때 도형을 그리기
      canvas.addEventListener("mousedown", downHandler);
      canvas.addEventListener("mouseup", upHandler);
      canvas.addEventListener("mousemove", moveHandler);
      control.addEventListener("click", setColor);
      savebtn.addEventListener("click", createImage);
    </script>
  </body>

스타일
스타일은 다음과 같이 적용했다.

	<style>
      canvas {
        background: #eee;
      }
      .color-btn {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
      }
      .color-btn[data-color="black"] {
        background: black;
      }
      .color-btn[data-color="red"] {
        background: red;
      }
      .color-btn[data-color="green"] {
        background: green;
      }
      .color-btn[data-color="blue"] {
        background: blue;
      }
      .image-btn {
        width: 40px;
        height: 40px;
        background: url(../images/ilbuni2.png) no-repeat 50% 50% / cover;
      }
    </style>