CanvasRenderingContext2D.globalCompositeOperation

Canvas 2D API의 CanvasRenderingContext2D.globalCompositeOperation 속성은 새 모양을 그릴 때 적용할 합성 작업의 유형을 설정한다.

그림과 그림이 겹칠 때 겹치는 부분에 대한 유형을 설정하는 것이라고 생각하면 된다.!

아래와 같이 사용하면 된다.

ctx.globalCompositeOperation = type;

types의 종류는 다음과 같다.

• source-over
  • 기본값, 겹치는 부분에 대한 빛의 삼원색이 적용된다.
• scource-in
  • 겹치는 부분에 대해서만 새롭게 그림.
• source-out
  • 
• source-atop
  • 
• destination-over
  • 
• destination-in
  • 
• destination-out
  • 
• destination-atop
  • 
• lighter
  • 
• copy
  • 
• xor
  • 
• multiply
  • 
• screen
  • 
• overlay
  • 
• darken
  • 
• lighten
  • 
• color-dodge
  • 
• color-burn
  • 
• hard-light
  • 
• soft-light
  • 
• difference
  • 
• soft-light
  • 
• exclusion
  • 
• hue
  • 
• saturation
  • 
• color
  • 
• luminosity
  • 

예시

    const ctx = document.getElementById('canvas').getContext('2d');
  
    function draw(){
        //도형이 겹칠때 속성을 설정한다.
     ctx.globalCompositeOperation = 'lighten';

     ctx.fillStyle = 'blue';
     ctx.fillRect(10,10,100,100);

     ctx.fillStyle = 'red';
     ctx.fillRect(50,50,100,100);

     ctx.fillStyle = 'green';
     ctx.fillRect(70,0,100,100);

    }
    if(document.getElementById('canvas').getContext){
        draw();
    }