[Canvas 공부 2일차] 이미지 업로드

이미지 불러오기 코드

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // sx, sy는 소스의 x,y

이미지 불러오기 예제

기본적으로 이미지를 불러오는 방법은 다음과 같다. 

const canvas = document.getElementById("board_canvas");
    const context = canvas.getContext("2d");
    const imageElem = new Image();
    imageElem.src = "src/img/medb.jpg";
    imageElem.addEventListener("load", () => {
      context.drawImage(imageElem, 0, 0);//이미지1
      context.drawImage(imageElem, 50, 50, 100, 100);//이미지2
      context.drawImage(imageElem, 100, 100, 100, 100, 100, 100, 100, 100);//이미지3(짤린다...)
    });

 

원하는 위치에 점 그리기

 

 

    const canvas = document.getElementById("board_canvas");
    const context = canvas.getContext("2d");
    function clickEvent(event) {
      context.beginPath();
      context.arc(event.layerX, event.layerY, 10, 0, Math.PI * 2);
      context.fill();
    }
    //clientX,Y는 브라우저 기준으로의 위치이다.
    //layerX,Y canvas기준 클릭한 곳..! 을 보여준다.
    canvas.addEventListener("click", clickEvent);