HTML5 캔버스(Canvas)는 그리기 작업 중 캔버스의 상태를 저장하고 복원할 수 있도록 두 가지 핵심 메서드를 제공합니다. save() 메서드가 호출될 때마다 현재 캔버스 상태가 스택(stack)에 저장되며, restore() 메서드가 호출될 때마다 스택에서 가장 마지막에 저장된 상태가 꺼내져 다시 적용됩니다.
이러한 스택 기반 구조 덕분에 여러 단계의 상태 변경을 거치더라도 이전 설정으로 손쉽게 되돌아갈 수 있습니다.
주요 메서드 정리
| 번호 | 메서드 및 설명 |
|---|---|
| 1 | save() 현재 캔버스 상태(스타일 및 변환 정보)를 스택에 푸시(push)합니다. |
| 2 | restore() 스택의 최상위 상태를 팝(pop)하여, 컨텍스트를 해당 상태로 되돌립니다. |
저장되는 상태 항목
save() 메서드로 저장되는 대표적인 상태에는 다음이 포함됩니다.
- fillStyle, strokeStyle 등 스타일 속성
- globalAlpha(전역 투명도)
- lineWidth, lineCap, lineJoin 등 선 관련 설정
- 변환 행렬(transform matrix)
- 클리핑 영역(clipping region)
예제 코드
다음 코드를 실행하면 save()와 restore() 메서드가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height: 100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// DOM을 통해 캔버스 요소 가져오기
var canvas = document.getElementById('mycanvas');
// 캔버스 미지원 브라우저에서 실행 방지
if (canvas.getContext){
// getContext로 2D 드로잉 컨텍스트 사용
var ctx = canvas.getContext('2d');
// 기본 설정으로 사각형 그리기
ctx.fillRect(0,0,150,150);
// 기본 상태 저장
ctx.save();
// 설정 변경 후 사각형 그리기
ctx.fillStyle = '#66FFFF'
ctx.fillRect(15,15,120,120);
// 현재 상태 저장
ctx.save();
// 새로운 설정 변경
ctx.fillStyle = '#993333'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
// 이전 상태 복원
ctx.restore();
// 복원된 설정으로 사각형 그리기
ctx.fillRect(45,45,60,60);
// 원래 상태 복원
ctx.restore();
// 복원된 설정으로 사각형 그리기
ctx.fillRect(40,40,90,90);
} else {
alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>예제 동작 방식 설명
위 예제의 실행 흐름을 단계별로 살펴보면 다음과 같습니다.
- 첫 번째 fillRect: 기본 검정색으로 150×150 크기의 사각형을 그립니다.
- 첫 번째 save(): 기본 상태를 스택에 저장합니다.
- fillStyle 변경: 하늘색(#66FFFF)으로 변경한 뒤 사각형을 그리고, 두 번째 save()로 이 상태를 저장합니다.
- 추가 변경: 붉은색(#993333)과 투명도 0.5를 적용해 사각형을 그립니다.
- 첫 번째 restore(): 직전에 저장된 하늘색 상태로 복원되어, 같은 색상으로 사각형이 다시 그려집니다.
- 두 번째 restore(): 처음의 기본 상태로 돌아가 검정색 사각형이 그려집니다.
이처럼 save()와 restore()를 활용하면 복잡한 그래픽 작업에서도 스타일 설정을 안전하게 보관하고 필요할 때 즉시 되돌릴 수 있어, 코드의 유지보수성과 가독성이 크게 향상됩니다.