[바닐라js로 그림판 만들기] Filling Mode

ctx.fillStyle = "yellow";

ctx.fillRect(50,20,100,49); //x,y,width,height

.fillRect(x,y,width,height)를 통해서 채워진 사각형을 그릴 수 있다.

아까 브러쉬(그냥 선)의 색을 strokeStyle으로 지정했다면

Filling은 fillStyle을 사용하면 된다.

 

ctx.fillStyle = "yellow";

ctx.fillRect(50,20,100,49); //x,y,width,height

 

ctx.fillStyle = "purple";

ctx.fillRect(80,10,100,49);

Canvas는 위에서부터 아래로 내려오면서 실행이 되므로

Fillstyle을 지정한 다음에 fillRect로 그리고, 다른 fillStyle을 지정하고 fillRect로 그리면 다른게 그려진다.

 

 

function handleColorClick(event){

    const color = event.target.style.backgroundColor;

    ctx.strokeStyle = color;

    ctx.fillStyle = color;

}

 

handleColorClick 함수에서 fillStyle도 color로 지정해주는 코드를 추가한다.

 

 

canvas.addEventListener("click",handleCanvasClick);

canvas에 다음과 같은 코드를 추가한다.

 

function handleCanvasClick(){

    if(filling){

        ctx.fillRect(0,0,canvas.width,canvas.height);

    }

    

}

그리고 handleCanvasClick 함수를 만든다.