HTML5 캔버스는 그리기 작업 중 현재 상태를 임시로 보관하고 필요할 때 되돌릴 수 있도록 save()와 restore()라는 두 가지 핵심 메서드를 제공합니다.
캔버스의 상태는 save() 메서드가 호출될 때마다 스택(stack)에 순서대로 저장되며, restore() 메서드가 호출될 때마다 스택의 맨 위에 있는 마지막으로 저장된 상태가 꺼내져 적용됩니다.
주요 메서드
| 번호 | 메서드 및 설명 |
|---|---|
| 1 | save() 현재 캔버스의 그리기 상태(스타일, 변형 등)를 스택에 푸시(push)하여 저장합니다. |
| 2 | restore() 스택의 맨 위에 있는 상태를 팝(pop)하여, 캔버스 컨텍스트를 해당 상태로 되돌립니다. |
예제 코드
아래 코드를 실행하면 HTML5 캔버스에서 상태 저장과 복원이 실제로 어떻게 동작하는지 확인할 수 있습니다. 기본 상태로 검은 사각형을 그린 뒤, 색상을 변경하면서 상태를 저장하고 복원해 가며 다양한 사각형을 그립니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// DOM을 통해 canvas 요소 가져오기
var canvas = document.getElementById('mycanvas');
// 캔버스를 지원하지 않는 브라우저에서는 실행하지 않음
if (canvas.getContext){
// getContext를 사용해 2D 드로잉 컨텍스트 생성
var ctx = canvas.getContext('2d');
// 기본 설정으로 사각형 그리기
ctx.fillRect(0,0,150,150);
// 기본(default) 상태 저장
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(0,0,150,150)으로 기본 색상(검정)의 사각형이 그려집니다. save()를 호출한 후fillStyle을#66FFFF(연한 청록색)로 변경하여 두 번째 사각형을 그리고 다시 상태를 저장합니다.- 이후
fillStyle을#993333(적갈색)으로 바꾸고 투명도(globalAlpha = 0.5)를 적용해 세 번째 사각형을 그립니다. restore()를 호출하면 직전에 저장된 상태(연한 청록색)로 돌아가 네 번째 사각형이 그려지고, 한 번 더restore()를 호출하면 최초의 기본 상태(검정)로 복원됩니다.
이처럼 save()와 restore()를 활용하면 여러 단계의 스타일 변경을 안전하게 관리할 수 있어, 변형(transform), 클리핑(clipping), 스타일 속성을 반복적으로 사용하는 복잡한 캔버스 애니메이션이나 그래픽 작업에서 특히 유용합니다.