JS - canvas 코드 기록용

• 그리기 버튼과 채우기 버튼
• 컴퓨터에 저장되어 있는 그림 불러오기
• text를 canvas에 추가하기

<button id="mode-btn">Fill</button>
index.html에 버튼 만들기

 let isFilling = false;
let을 이용해 변환 가능한 변수를 하나 만든 후

modeBtn.addEventListener("click", onModeClick);

function onModeClick(){
    if(isFilling){
        isFilling = false;
        modeBtn.innerText = "Fill"
    }else {
        isFilling = true;
        modeBtn.innerText = "Draw"
    }
}

• fill과 draw를 스위칭 가능

 <input id="addingImage" type="file" accept="image/*"/>
html에 image만 불러오기 가능하게 한 input 생성

const addingImage = document.getElementById("addingImage");

addingImage.addEventListener("change",onAddingImg)

function onAddingImg(event){
    console.dir(event.target);
    const file = event.target.files[0]; //파일위치선정
    const url = URL.createObjectURL(file); // url 생성
    const image = new Image() // img 새 객체 생성
    image.src = url;
    image.onload = function(){
        ctx.drawImage(image, 0 , 0 , 800, 800);
    };
}

console.dir(event.target)으로 file 확인후 url 생성한 다음 load

text 입력 후 canvas에 더블클릭하면 붙여넣을 수 있는 기능

<input id="text" placeholder="write it and dbclick" type="text"/>

html에 input 생성

const ctx = canvas.getContext("2d") 
const textInput = document.getElementById("text");

canvas.addEventListener("dblclick", onTextInput);

function onTextInput(event){
    if(textInput !== ""){
        ctx.save(); 
    const text = textInput.value;
    ctx.lineWidth = 1;
    ctx.font= "68px serif";
    ctx.fillText(text, event.offsetX, event.offsetY)
    ctx.restore();
    }
}

textInput에 addEventListener 기능 추가하지 않고 canvas에 직접 추가

draw 선에 영향 주지 않기 위해서 ctx.save(); / ctx.restore(); 로 저장 후 복구

textInput 이 비어있지 않을때 활용하기위해 조건문 추가

---

js - canvas 기능을 처음 써봐서 아직 익숙하지가 않다!
여러 기능을 사용해보고 코드를 기록하려고 글을 작성했다.