그림판 만들기 - 6 초기화 기능

사용자가 그린 그림의 전체를 삭제하기 위한 기능을 구현한다.

사용자가 삭제 버튼을 누르면 그려진 그림이 전부 사라진다.

일단 먼저 삭제 버튼을 불러와서 이벤트를 추가한다.

 assignElement() {
    
    this.clearEl = this.toolbarEl.querySelector("#clear");
  }

addEvent() {

    this.clearEl.addEventListener("click", this.onClickClear.bind(this));
  }

 onClickClear() {
    this.context.clearRect(0, 0, this.canvasEl.width, this.canvasEl.heigt);//캔버스가 초기화
    this.undoArray = []; //이전에 그림이 기록된 데이터 삭제
    this.updateNavigator(); //네비게이터 업데이트
    this.initCanvasBackgroundColor(); //캔버스의 배경을 다시 지정
  }

사라진다 = 캔버스가 초기화된다 = 이전에 그림이 기록된 데이터 또한 사라진다 = 네비게이터에서도 같은 화면이 나타나야 하므로 업데이트 시킨다 = 캔버스의 배경을 다시 지정한다

이렇게 하면 사용자가 삭제 버튼을 누르면 그림이 전부 지워지는 것을 확인 할 수 있다.