HTML - 캔버스 이미지 병합

globalCompositeOperation 은 새로운 이미지를 원래 이미지와 병합하여 새로운 이미지를 만들 수 있습니다. 새로운 이미지를 그리면 보통은 기존 이미지 위에 그려져 일정 영역을 가려지게 되는데, 가려 보이지 않게 하거나 특정 부분만 표시되게 할 수 있습니다.

globalCompositeOperation = type

type에는 아래 표를 사용할 수 있습니다.

Type	설 명
source-over	새로운 이미지가 원래 이미지 위에 표시됨. 기본값
source-atop	새로운 이미지가 원래 이미지 위에 표시되고 원래 이미지와 겹치지 않는 새로운 이미지는 제거됨
source-in	새로운 이미지가 원래 이미지 위에 표시되고 겹치는 부분만 표시됨
source-out	새로운 이미지가 원래 이미지 위에 표시되고 겹치지 않는 새로운 이미지만 표시됨
destination-over	원래 이미지가 새로운 이미지 위에 표시됨
destination-atop	원래 이미지가 새로운 이미지 위에 표시되고 새로운 이미지와 겹치지 않는 원래 이미지는 제거됨
destination-in	원래 이미지가 새로운 이미지 위에 표시되고 겹치는 부분만 표시됨
destination-out	원래 이미지가 새로운 이미지 위에 표시되고 겹치지 않는 원래 이미지만 표시됨
lighter	두 도형이 겹치는 곳의 색상이 두 색상 값을 합한 값으로 표시됨
copy	새로운 도형만 표시됨
xor	두 도형이 겹치는 부분만 제거됨

처음에 그려진 이미지는 빨간색 사각형이고, 뒤에 그려진 이미지는 파란색 원입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

// 첫 번째 도형
context.fillStyle = "red";
context.fillRect(50,50,100,100);
// 두 도형 병합
// source-over
context.globalCompositeOperation = "source-over";
// 두 번째 도형
context.fillStyle = "blue";
context.beginPath();
context.arc(130,120,50,0,2*Math.PI);
context.fill();
</script>