JS canvas로 그림판 만들기

# UI/UX

전체코드

<script>
const canvas = document.querySelector("#jsCanvas");
const colors = document.querySelectorAll(".jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const saveBtn = document.getElementById("jsSave");
const clearBtn = document.getElementById("jsClear");
const ctx = canvas.getContext("2d");


const CANVAS_SIZE = 700;
const INITIAL_COLOR = "#2c2c2c"


ctx.fillStyle ="white";
ctx.fillRect(0, 0, CANVAS_SIZE,CANVAS_SIZE);
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5;

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;

let painting = false;
let filling = false;

function startPainting () {
    painting = true;
}

function stopPainting () {
    painting = false;
}

function onMousemove (event) {
    const x = event.offsetX;
    const y = event.offsetY;
    if (!painting) {
        ctx.beginPath();
        ctx.moveTo(x, y);   
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}


function handleChangeColor (event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
}

function handleRangeChange (event) {
    const size = event.target.value;
    ctx.lineWidth = size;
}

function handleModeChange () {
    if (filling === true) {
        filling = false;
        mode.innerText = "Paint";
    } else {
        filling = true;
        mode.innerText = "Fill";
    }
}

function handleClickCanvas () {
    if(filling) {
        ctx.fillRect(0, 0, CANVAS_SIZE,CANVAS_SIZE);
    } 
}

function handleCm (event) {
    event.preventDefalut();
}

function handleSaveClick () {
    const image = canvas.toDataURL("image/jpeg");
    const link = document.createElement("a");
    link.href = image;
    link.download = "JSpaint";
    link.click();
}

function handleClearBtn () {
    ctx.clearRect(0,0,CANVAS_SIZE,CANVAS_SIZE);
}

if(canvas) {
    canvas.addEventListener("mousemove", onMousemove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
    canvas.addEventListener("click", handleClickCanvas);
    canvas.addEventListener("contextmenu", handleCm)
}

Array.from(colors).forEach(color =>
    color.addEventListener("click",handleChangeColor));

if(range) {
    range.addEventListener("input", handleRangeChange);
}

if (mode) {
    mode.addEventListener("click", handleModeChange);
}

if (saveBtn) {
    saveBtn.addEventListener("click",handleSaveClick);
}

if (clearBtn) {
    clearBtn.addEventListener("click", handleClearBtn);
}
</script>

mouse event

 1. click 
- 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다.
2. mousedown 
- 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.
3. mouseup 
- 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다.
4. dblclick 
- 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다.
5. mousemove 
- 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다.
6. mouseover 
- 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.
7. mouseout 
- 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.
8. mouseenter 
- 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.
- 버블링이 발생하지 않습니다.
9. mouseleave 
- 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.
- 버블링이 발생하지 않습니다.
10. contextmenu 
- 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.

canvas를 이용해서 슈팅게임과 그림판을 만들어보니 canvas에 대해서 조금 더 알게 되었고
DOM요소 제어도 많이 익숙해진 것 같다.

참고자료