1.2.2 캔버스 상태 저장 및 복원

1. 1.2.1절(‘2d 콘텍스트’)에서 캔버스 콘텍스트의 모든 속성을 소개했다.
2. 드로잉할 때 해당 속성들을 설정하게 될 것이다.
3. 이때, 이런 속성들을 임시로 설정하고 싶을 수도 있다.
4. 캔버스 API에서는 캔버스 콘텍스트의 모든 속성을 저장하고 복원할 수 있는 save() 메서드와 restore() 메서드를 제공한다.

function drawGrid(strokeStyle, fillStyle) {
    controlContext.save(); // 콘텍스트를 스택에 저장한다.

    controlContext.fillStyle = fillStyle;
    controlContext.strokeStyle = strokeStyle;

    // 격자무늬 그리기...
    
    controlContext.restore(); // 스텍으로부터 콘텍스트를 복원한다.
}

save() 및 restore()를 한 세트로 호출할 수 있다.

1. 콘텍스트의 save() 메서드는 콘텍스트의 현재 상태를 스택에 저장하는 메서드다.
2. 반대로 restore() 메서드를 호출하면, 스택에 저장된 콘텍스트의 상태를 불러와 복원한다.
3. 다시 말하면 save() 및 restore()를 한 세트로 호출할 수 있다.

1. save()

   • 캔버스 현재 상태를 스택에 넣는다.
   • 캔버스 상태는 strokeStyle, fillStyle, globalCompositeOperation 등을 포함한 캔버스 콘텍스트의 모든 속성과

   • 현재 변화 및 클리핑 영역(clipping region)도 포함하고 있다.

   • 하지만 캔버스 상태는 현재패스(path)나 비트맵(bitmap)을 포함하지 않는다.
   • begitPath()를 호출해야만 패스를 재설정할 수 있으며

   • 비트맵은 콘텍스트가 아닌 캔버스의 속성이다.

   • 비트맵은 캔버스의 속성이지만 콘텍스트(콘텍스트의 getImageData() 메서드)를 통해 비트맵에 접근할 수 있다는 점에 주의하자.

2. restore()

   • 스택으로부터 맨 위에 있는 정보를 꺼낸다.
   • 이렇게 정보를 꺼내면 스택의 맨 위에 있는 상태가 현재 상태가 되며 브라우저에서는 그에 맞춰 캔버스 상태를 설정해야 한다.
   • 따라서 save() 메서드와 restore() 메서드 사이에 캔버스 상태를 변화시키고 싶다면 restore() 메서드를 호출할 때까지만 상태를 유지하면 된다.

드로잉 표면 저장 및 복원하기

1. 이 절에서는 콘텍스트 상태를 저장하고 복원하는 방법을 소개했다.
2. 그에 못지않게 드로잉 표면 자체를 저장하고 복원하는 방법도 굉장히 유용하다.
3. 이 방법은 1.7절(드로잉 표면의 저장 및 복원)에서 소개할 예정이다.