HTML5 Canvas 성능향상시키기 : Path2D 사용하기

Canvas 성능 향상의 포인트는 최대한 Canvas 에 직접적으로 무언가를 지시하는 횟수를 줄이는것이 관건이다.

즉 Context 에 곧바로 지시하는 횟수를 최소화하는것이다.

Canvas 에서도 기본적으로 context.lineTo 같은것들을 지원하지만, 

Path2D 객체를 사용하여 그릴 경로를 먼저 다 정한뒤에, 

이 객체를 fill 이나, stroke 의 인자로 넘겨야하는것이다.

만약에 100만개의 사각형을 그린다고 생각해보라.

const drawAlotOfRects = (context) => {

    const amount = 1000000

    context.strokeStyle = 'white'

    for (let i = 0; i < amount; ++i) {

        const p = new Path2D()

        p.rect(0, 0, 100, 100)
        
    }

    context.stroke(p)

}

편의상 rect 를 0, 0, 100, 100 으로 일단 처리하였다. (실제로는 다 다른 rect 일것)

 

strokeStyle 또한 매번 변하지않는다면 loop 바깥으로 빼는것이 좋다.

context 에서 가장 무거운 함수는 fill() 과 stroke() 이다.

이들의 호출을 최소화하는것이 관건이다.

context 에서 제공하는 strokeRect 함수도 존재하지만, 이 역시 결과적으로 stroke 를 호출하는거라서,

그냥 Path2D 로 경로를 다 지정한뒤에, 룹 바깥에서 그리는 명령 stroke() 나 fill() 을 호출하도록 하자.

추후 밴치마크도 한번 해서 올려보도록 하겠다.