HTML Canvas 합성
Canvas 합성은 새로운 도형이 기존 도형과 어떻게 결합되는지를 제어하는 기능이다. 이 기능을 사용하면 다양한 시각적 효과를 만들 수 있다.
globalCompositeOperation 속성
globalCompositeOperation 속성은 새로운 도형을 캔버스에 그릴 때 기존 도형과 어떻게 합성할지를 설정한다.
기본 문법은 다음과 같다.
context.globalCompositeOperation = "합성모드";다음은 사용 가능한 합성 모드들이다.
| 합성 모드 | 설명 |
|---|---|
| source-over | 기본값. 새로운 도형이 기존 도형 위에 그려진다 |
| source-in | 새로운 도형이 기존 도형과 겹치는 부분에만 그려진다 |
| source-out | 새로운 도형이 기존 도형과 겹치지 않는 부분에만 그려진다 |
| source-atop | 새로운 도형이 기존 도형 위에만 그려진다 |
| destination-over | 새로운 도형이 기존 도형 뒤에 그려진다 |
| destination-in | 기존 도형이 새로운 도형과 겹치는 부분에만 유지된다 |
| destination-out | 기존 도형이 새로운 도형과 겹치지 않는 부분에만 유지된다 |
| destination-atop | 기존 도형이 새로운 도형 아래에만 유지된다 |
| lighter | 두 도형이 겹치는 부분의 색상이 더해진다 |
| copy | 새로운 도형만 표시되고 기존 도형은 지워진다 |
| xor | 두 도형이 겹치지 않는 부분만 표시된다 |
source-over (기본값)
source-over는 기본 합성 모드로, 새로운 도형이 기존 도형 위에 그려진다.
<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 빨간색 사각형을 먼저 그리고, 그 위에 파란색 사각형을 그린다. 겹치는 부분에서는 파란색 사각형이 위에 나타난다.
source-in
source-in 모드에서는 새로운 도형이 기존 도형과 겹치는 부분에만 그려진다.
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 파란색 사각형이 빨간색 사각형과 겹치는 부분에만 나타난다.
source-out
source-out 모드에서는 새로운 도형이 기존 도형과 겹치지 않는 부분에만 그려진다.
<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-out";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 파란색 사각형이 빨간색 사각형과 겹치지 않는 부분에만 나타난다.
source-atop
source-atop 모드에서는 새로운 도형이 기존 도형 위에만 그려진다.
<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 파란색 사각형이 빨간색 사각형이 있는 영역에만 나타나고, 빨간색 사각형의 나머지 부분은 그대로 유지된다.
destination-over
destination-over 모드에서는 새로운 도형이 기존 도형 뒤에 그려진다.
<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 파란색 사각형이 빨간색 사각형 뒤에 그려져서 겹치는 부분에서는 빨간색이 위에 나타난다.
destination-in
destination-in 모드에서는 기존 도형이 새로운 도형과 겹치는 부분에만 유지된다.
<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas6");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "destination-in";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 빨간색 사각형이 파란색 사각형과 겹치는 부분에만 유지된다.
destination-out
destination-out 모드에서는 기존 도형이 새로운 도형과 겹치지 않는 부분에만 유지된다.
<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas7");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 빨간색 사각형이 파란색 사각형과 겹치지 않는 부분에만 유지된다. 이는 지우개 효과를 만들 때 유용하다.
lighter
lighter 모드에서는 두 도형이 겹치는 부분의 색상이 더해진다.
<canvas id="myCanvas8" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas8");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 빨간색과 파란색이 겹치는 부분에서 색상이 더해져서 더 밝은 색상이 나타난다.
xor
xor 모드에서는 두 도형이 겹치지 않는 부분만 표시된다.
<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 두 사각형이 겹치는 부분은 투명해지고, 겹치지 않는 부분만 표시된다.
globalAlpha 속성
globalAlpha 속성은 캔버스에 그려지는 모든 도형의 투명도를 설정한다. 값은 0.0(완전 투명)부터 1.0(완전 불투명) 사이의 숫자이다.
기본 투명도 설정
<canvas id="myCanvas10" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas10");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 파란색 사각형이 50% 투명도로 그려져서 아래의 빨간색 사각형이 비쳐 보인다.
여러 투명도 레벨
<canvas id="myCanvas11" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas11");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.7;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.globalAlpha = 0.3;
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>이 예제에서는 파란색 사각형은 70% 투명도로, 녹색 사각형은 30% 투명도로 그려진다.
합성과 투명도 조합
globalCompositeOperation과 globalAlpha를 함께 사용하면 더 복잡한 효과를 만들 수 있다.
<canvas id="myCanvas12" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas12");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.5;
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
</script>이 예제에서는 투명도와 합성 모드를 함께 사용하여 반투명한 source-atop 효과를 만든다.
원형 도형을 사용한 합성 예제
사각형 외에 원형 도형으로도 다양한 합성 효과를 만들 수 있다.
<canvas id="myCanvas13" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas13");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 35, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.arc(105, 75, 35, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
</script>이 예제에서는 두 원이 겹치는 부분은 투명해지고, 겹치지 않는 부분만 표시되는 xor 효과를 만든다.
💡 합성 활용 팁:
• 마스킹 효과를 만들 때는 destination-in이나 destination-out을 사용하면 유용하다
• 빛 효과나 글로우 효과를 만들 때는 lighter 모드를 활용하면 좋다
• globalAlpha는 전체 캔버스에 영향을 주므로 필요에 따라 save()와 restore() 메서드로 상태를 저장하고 복원하자
Canvas 합성 기능을 사용하면 단순한 도형들을 조합하여 복잡하고 흥미로운 시각적 효과를 만들 수 있다. 이러한 기능들을 활용하여 게임, 데이터 시각화, 예술적 표현 등 다양한 분야에서 창의적인 그래픽을 구현할 수 있다.
