[JS] Day8 - Fun With HTML5 Canvas

jiseong·2021년 8월 25일
0

T I Learned

목록 보기
42/291

demo:

https://danji-ya.github.io/JS_javascript30/08-FunWithHTML5Canvas/


Day8 - Fun With HTML5 Canvas

🎯 기능 요구사항

  • 사용자가 마우스를 움직이면 캔버스에 그림이 그려진다.
  • 그림이 그려질 때, 색깔과 크기를 변화시킨다.
  • + clear 버튼 클릭 시, 캔버스를 초기화 시킨다.
  • + 윈도우가 resize 될 때마다 캔버스의 크기를 변화시킨다.
    • 캔버스의 크기가 변화될 때 캔버스 초기화를 방지한다.
    • debounce를 사용하여 윈도우 resize를 최적화 해본다.

🚀 배운 점

debounce

윈도우 size를 변경시킬 때 마다 캔버스 사이즈를 변경해봤는데 캔버스 안의 내용들이 초기화가 된다.
그렇다면 캔버스에 그려진 내용을 새로운 캔버스에 다시 그려줘야하는데 window.addEventListener("resize", callFun)이 호출되는 횟수가 너무나도 많았다. 캔버스 뿐만 아니라 무거운 계산이 존재한다면 퍼포먼스 이슈가 생길 것이다. 그래서 debounce방식을 찾아보게 되었다.

function debounce(func, time = 100){
    let timer;
    return function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(func, time);
    };
}

function resizeCanvas() {
    console.log(`resize Canvas`);
    ...
}

window.addEventListener("resize", debounce(resizeCanvas, 200));

위의 방식은 setTimeout을 이용하여 마지막으로 정의한 setTimeout를 Event Loop에서 call stack이 비어있을 때, 해당 콜백함수를 실행시키는 방식으로 불필요한 호출을 방지할 수 있었다.

  • <debounce 적용>

  • <debounce 미적용>

캔버스 리사이징 시, 초기화 방지 (offCanvas)

// Make our in-memory canvas
const offCanvas = document.createElement('canvas');
const offCtx = offCanvas.getContext('2d');

function resizeCanvas() {
    ...

    // copy
    offCanvas.width = canvasRef.width;
    offCanvas.height = canvasRef.height;
    offCtx.drawImage(canvasRef, 0, 0);


    canvasRef.width = window.innerWidth;
    canvasRef.height = window.innerHeight;

    //paste
    ctx.drawImage(offCanvas, 0, 0);

    resetProperty();
}

캔버스가 리사이징 될 때, 눈에는 보이지 않는 임시 캔버스에 기존의 캔버스를 그려두고 우리 눈에 보이는 캔버스에 그 임시 캔버스를 그려주는 방식으로 기존의 그림을 유지할 수 있었다.


reference

0개의 댓글