[JavaScript] 자바스크립트로 캔버스 제어하기 - 스타일 저장 & 불러오기 (save와 restore)

개요

캔버스의 컨텍스트 영역에서는 한번에 하나의 스타일만 가질 수 있다.

예를 들어, 빨강색의 꽉찬 원과 파란색의 사각형을 그리려면..

1. 현재 컨텍스트 영역의 채우기 스타일을 빨강색으로 설정한다.

2. 원을 그린다. 

3. 현재 컨텍스트 영역의 채우기 스타일을 파란색으로 설정한다.

4. 사각형을 그린다.

한번에 빨강색과 파란색을 설정해두는게 아니라, 위의 예시처럼 스타일 하나를 설정하고 그리고 다시 스타일 하나를 설정하고 그리고.. 하는 방식이다. 

 

그런데 만약, 빨강색 도형을 쭉 그리다가 파란색 도형을 또 쭉 그리다가 다시 빨강색 도형을 쭉 그리다가... 이런 식으로 전에 그렸던 스타일의 도형을 다시 그려야 한다고 하자. 한두번은 그렇다 쳐도, 만약 전에 그렸던 스타일을 자주 다시 그려야 한다면 코드에 불필요한 반복이 생길 것이다. 

 

이 때 컨텍스트 영역에 설정된 그리기 스타일을 저장하고 다시 불러올 수 있다면, 일일히 스타일을 새로 지정하는 것보다 빠르고 간단하게 그릴 수 있지 않을까? 

save()와 restore()는 이럴 때 쓸 수 있는 함수이다. 

 

 

CanvasRenderingContext2D.save()

현재 상태를 스택에 push하여 캔버스의 전체 상태를 저장한다.

 

여기서 스택에 저장되는 그리기 상태는 다음과 같다.

- 현재 transformation 행렬

- 현재 클리핑 영역

- 현재 dash 리스트

- 아래 요소들의 현재 속성값 

그리기	선 스타일, 채우기 스타일, 선 너비, 획의 끝부분 모양, 선분의 연결 모양, 선 접합부의 둥글기 제한, 그리기 및 이미지 투명도, 선 dash 오프셋
그림자	그림자 색상, 그림자의 X, Y오프셋, 그림자의 흐린정도
글자	글꼴, 글자 정렬방식, 글자의 기준선, 글자 쓰기 방향
이미지	이미지 크기 조정 시의 부드럽게 흐리기 설정 여부

 

 

CanvasRenderingContext2D.restore()

그리기 상태 스택의 맨 위 항목을 pop해서 가장 최근에 저장된 캔버스 상태를 복원한다.

 

 

아래는 save()와 restore()를 사용해 저장한 스타일을 중간에 다시 불러와 그리는 코드이다. 

const myCanvas = document.createElement('canvas');
const ctx = myCanvas.getContext('2d');
document.body.appendChild(myCanvas); 
myCanvas.style.width = '100%';
myCanvas.style.height = '100%';

//빨강색 설정 후 상태저장
ctx.fillStyle = 'red';
ctx.fillRect(0, 50, 30, 30); //빨간 사각형그리기
ctx.save();

//파란 사각형들을 그리다가 5번째 사각형은 다시 빨간색으로 그리기
for(let i = 1; i < 10; i++){
	ctx.fillStyle = 'blue';
	if(i === 5){
    	ctx.restore();
    }
	ctx.fillRect(50*i, 50, 30, 30);
}

 

---

참고 자료

MDN Docs

save https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save

restore https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

webisfree https://webisfree.com/2018-06-14/canvas-%EA%B8%B0%EC%A1%B4-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%80%EC%9E%A5-%EB%B0%8F-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-save()-restore()