(Meme Maker) #텍스트 삽입하기

Meme Maker
텍스트 삽입하기

 

---

 

- 만들고 싶은 기능

 

• HTML에 element 추가하기

<input type="text" placeholder="Write and then double click" id="text" />

 

• Javascript 에서  element 가져와서 함수추가하기

const textInput = document.getElementById("text")

// textInput이 아닌, canvas 자체에 더블클릭시 이벤트 리스너 추가
canvas.addEventListener("dblclick", onDoubleClick);

 

• Javascript 에서  함수만들기

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