[canvas] 뒷배경 살리면서 지우개 기능 쓰기

 

위에 짤처럼 뒤에 배경이 있고(canvas에 심은 배경은 아님) 그 위에 있는 canvas에 열심히 그리기 기능을 써서 마우스로 끄적끄적 해놓은 것을 지우고 싶을때 뒤에 배경은 두고 내가 그린 선만 지워지는 기능은 없나 싶었는데(마치 포토샵의 layer같은 그런거) 다행히 아주 쉽게 구현이 가능했음.

 

 

1. globalCompositeOperation 설정

ctx.globalCompositeOperation = "destination-out";  
ctx.strokeStyle = "#FFC300";

지우기 모드에 들어갔을때 위처럼 destination-out으로 설정해두고 지우개 색깔을 설정해두면 된다.

 

나같은 경우 노트패드처럼 노란 배경에 줄이 쫙쫙 그어져있는 배경 위에 캔버스로 그리는거라 지우개 색깔을 노란색으로 설정했음. 이렇게 하면 뒷배경 덮으면서 지우는게 아니라 아까 그렸던 선만 지울 수 있음.

 

참고로 지우개 쓴다음에 다시 또 그린다 라고 한다면 아래 값으로 바꿔줘야함

ctx.globalCompositeOperation = "source-over";