HTML5 Canvas 컴포지션 속성(globalCompositeOperation) 완벽 가이드

HTML5 캔버스 컴포지션 속성이란?

HTML5 캔버스는 globalCompositeOperation이라는 컴포지션(합성) 속성을 제공합니다. 이 속성은 캔버스에서 수행되는 모든 드로잉 작업에 영향을 미치며, 새로 그리는 도형(소스, source)과 이미 캔버스에 존재하는 도형(대상, destination)이 어떤 방식으로 합성될지 결정합니다.

소스(Source)와 대상(Destination)

소스(source) — 지금 막 그리려는 새 도형
대상(destination) — 캔버스에 이미 그려져 있는 기존 도형

예를 들어 먼저 사각형을 그린 다음 원을 그리면, 사각형이 대상이 되고 원이 소스가 됩니다. 합성 결과는 이 두 요소의 관계가 어떻게 처리되느냐에 따라 달라집니다.

사용 방법

2D 컨텍스트를 가져온 뒤 문자열 형태의 합성 모드를 지정하기만 하면 됩니다.

const ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-over'; // 기본값

12가지 컴포지션 타입 한눈에 보기

값	동작 방식
source-over	기본값입니다. 소스가 대상 위에 그려집니다.
source-in	소스는 두 도형이 겹치는 영역에만 표시되고, 나머지는 투명해집니다.
source-out	소스는 대상과 겹치지 않는 영역에만 표시됩니다.
source-atop	소스는 대상과 겹치는 영역에만 표시되고, 대상의 나머지 부분은 그대로 유지됩니다.
destination-over	대상이 소스 위에 남습니다. 소스가 뒤에 그려진 것처럼 보입니다.
destination-in	대상은 두 도형이 겹치는 영역에만 표시됩니다.
destination-out	대상은 소스와 겹치지 않는 영역에만 표시됩니다.
destination-atop	대상은 소스와 겹치는 영역에만 표시되고, 소스의 나머지 부분은 그대로 유지됩니다.
lighter	겹치는 영역의 색상 값이 서로 더해져 밝아집니다.
darker	겹치는 영역의 색상 값이 빼집니다. 참고로 이 값은 현대 브라우저에서 더 이상 지원되지 않습니다.
copy	소스만 표시되고 기존 대상은 모두 지워집니다.
xor	겹치는 영역은 투명해지고, 겹치지 않는 부분만 표시됩니다.

전체 예제 코드

아래 예제는 12개의 합성 모드를 각각의 캔버스에 적용해 한 화면에서 비교할 수 있도록 만든 코드입니다. 먼저 분홍색(#FF3366) 사각형을 그려 대상을 만든 뒤, 합성 모드를 설정하고 파란색(#0066FF) 원을 그려 소스를 적용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas 컴포지션 데모</title>
<style>
  .item { display:inline-block; margin:8px; text-align:center; }
  canvas { border:1px solid #ccc; background:#fff; }
</style>
</head>
<body>
<div id="wrap"></div>
<script>
var compositeTypes = [
  'source-over', 'source-in', 'source-out', 'source-atop',
  'destination-over', 'destination-in', 'destination-out',
  'destination-atop', 'lighter', 'darker', 'copy', 'xor'
];

var wrap = document.getElementById('wrap');

compositeTypes.forEach(function (type) {
  // 캔버스와 라벨 생성
  var item = document.createElement('div');
  item.className = 'item';

  var canvas = document.createElement('canvas');
  canvas.width = 125;
  canvas.height = 125;

  var label = document.createElement('div');
  label.textContent = type;

  item.appendChild(canvas);
  item.appendChild(label);
  wrap.appendChild(item);

  var ctx = canvas.getContext('2d');

  // 1) 사각형 그리기 → 대상(destination)
  ctx.fillStyle = '#FF3366';
  ctx.fillRect(15, 15, 70, 70);

  // 2) 컴포지션 속성 설정
  ctx.globalCompositeOperation = type;

  // 3) 원 그리기 → 소스(source)
  ctx.fillStyle = '#0066FF';
  ctx.beginPath();
  ctx.arc(75, 75, 35, 0, Math.PI * 2, true);
  ctx.fill();
});
</script>
</body>
</html>

코드를 실행하면 12개의 캔버스에 각 합성 모드가 적용된 결과가 나란히 표시되어, 모드별 차이를 직관적으로 비교할 수 있습니다.

참고: 최신 브라우저의 추가 합성 모드

최신 브라우저는 위 12가지 외에도 CSS와 공유하는 블렌드 모드인 multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity 등을 캔버스에서도 지원합니다. 포토샵 같은 이미지 편집 프로그램에서 보던 블렌딩 효과를 웹에서 그대로 구현할 수 있습니다.

마무리

globalCompositeOperation은 마스크(mask) 효과, 캔버스 지우개(eraser), 광원 효과, 도형 결합 등 다양한 그래픽 작업의 핵심 도구입니다. 특히 destination-out은 지우개 기능을 구현할 때 가장 많이 쓰이는 모드이니 꼭 기억해 두세요.