Today I Learned
GlobalCompositeOperation
The globalCompositeOperation property sets or returns how a source are drawn over a destination.
: source(이제 그리려고 하는 것) 가 destination(이미 캔버스에 그려져 있는 것) 에 어떤 방식으로 그려질지를 결정하고, 리턴하는 속성이다.
- Source : 이제 그리려고 하는 것(추가하려고 하는 것)
- Destination : 이미 캔버스에 그려놓은 것(이미 캔버스 상에 그려져 있는 것)
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);예를 들어, 위와 같은 코드가 있을 때,
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);이 부분을 통해 먼저 만들어진 빨간색 직사각형이 Destination이 되고,
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);이 부분을 통해 만들어질 파란색 직사각형이 Source가 된다.
ctx.globalCompositeOperation = "source-over";따라서, 이 globalCompositeOperation 속성은 source-over 즉,
source가 위가 되므로, 파란색 직사각형이(Source0 빨간색 직사각형(Destination) 위에 위치하도록 그려지게 된다. 여태까지 말한 속성값 말고도 다양한 속성값이 있고, 필요에 따라 활용하면 될 것 같다. 다양한 속성값은 여기를 참고하면 될 것 같다.
위와 같은 속성을 이용해서 brush tool을 만들 때 이미 한번 붓질(?)을 한 것위에 덧대어서 붓질을 하도록 할 수 있고, 지우개 기능을 만들 수 있다.
Displays the destination out of the source. Only the part of the destination that is OUTSIDE the source is shown, and the source is transparent
위의 설명은 destination-out 에 대한 설명인데, destination(이전에 칠해진 부분이라고 해보자)에 새로 붓질을 했다고 해보면(Source), source는 투명하고, source가 지나간 이외의 부분만 destination 영역을 보여준다고 한다. 즉, destination에서 지우개로(source) 지나간 부분은 안보이고, 지나가지 않은 영역만 보여주게 된다는 것 => 지우개의 역할과 같다.
