Canvas state stack

save()와 restore()는 그리기 상태를 쌓고 되돌린다

캔버스의 색상, 선 두께, 그림자, 변형은 모두 현재 상태에 속한다. save()는 그 상태를 스택에 보관하고, restore()는 가장 최근 상태를 꺼내 현재 상태로 되돌린다.

1 · 기본 상태

빨간 스타일로 시작

fillStyle과 선 스타일을 정한 뒤 첫 도형을 그린다.

2 · push

save()로 빨간 상태 보관

이후 다른 색과 변형을 써도 돌아갈 기준점이 남는다.

3 · 임시 변경

파랑, 초록 상태로 작업

중첩된 save()는 여러 단계의 임시 스타일을 분리한다.

4 · pop

restore()로 역순 복귀

마지막에 저장한 상태부터 꺼내며 파랑, 빨강 순서로 돌아온다.

색상 변경은 그림에 남고, 상태 변경은 스택으로 되돌린다

drawn output

이미 그린 픽셀은 restore()로 바뀌지 않는다. 되돌아가는 것은 다음 그리기에 쓰일 현재 상태다.

state stack
top 파란 상태 · 두 번째 save
below 빨간 상태 · 첫 번째 save

복원은 아래에서 위가 아니라 위에서 아래로 진행된다. 그래서 중첩 블록을 작게 유지해야 상태가 섞이지 않는다.

언제 저장하나

특정 색, 회전, 그림자를 잠깐 쓰고 원래 기준으로 돌아와야 할 때 저장한다.

무엇이 복원되나

스타일과 변형 같은 컨텍스트 상태가 복원된다. 캔버스에 찍힌 픽셀은 그대로 남는다.

무엇을 조심하나

save()와 restore() 짝이 어긋나면 다음 도형까지 임시 상태가 번진다.