Canvas로 그리기를 하고 있어 늦은 것은 없습니까?

직장에서 실제로 시도한 방법을 기재하겠습니다.
iPad의 4세대 safari, Android의 Chrome, Windows의 ie11, Edge에서 효과가 있는 것을 확인하고 있습니다.

1: requestAnimationFrame을 사용합시다

requestAnimationFrame은 setTimeout과 같은 API입니다.
requestAnimationFrame 사용에 대한 자세한 내용은 여기을 참조하십시오.

1-1 : 우선 간단한 애니메이션으로 requestAnimationFrame을 사용합시다.

이것은 효과가 없지만 setTimeout 또는 setInterval로 애니메이션을 만드는 것보다
좋은 것 같습니다.

1-2 : mousemove / touchmove 등의 동작 이벤트에서도 requestAnimationFrame을 사용합시다.

캔버스에 사각형이 있고 드래그하는 프로그램을 생각해보십시오.
그리기를 mousemove/touchmove 타이밍에서 수행하는 대신,
mousemove/touchmove에서 드로잉에 필요한 정보를 업데이트하고 requesAnimationFrame으로 그리려면
디스플레이가 부드럽습니까? 됩니다.

2: backBuffer(DOM에 추가되지 않는 Canvas)를 사용하자

동적으로 캔버스를 만들고 미리 그리면서 궁극적으로 보고 싶은 캔버스로 렌더링하면 더 빠르게 표시됩니다.
예를 들어, Canvas에 있는 위치에 원, 삼각, 사각형이 표시되어 있고, 3개가 있는 경우를 생각해 봅시다.
원, 삼각, 사각형은 이미지라고 가정합니다.
다음과 같은 경우입니다.

보통으로 구현하면 이미지를 로드한 후 캔버스에 원, 삼각, 사각형을 3회씩 그리게 됩니다.

하지만 여기에서 메모리에 캔버스를 만들어 (backBuffer라고 부르기로 합니다.), 거기에 원, 삼각, 사각형을 정리해 그려 두면,
그 backBuffer를 canvas에 3회 그리면 좋을 것입니다.

3: 클리어 하는 구형의 사이즈 또는 횟수를 줄이자

canvas에 그리기 전에 clearRect 메서드를 호출하여 전체 canvas를 지우고 있다고 생각하지만,
전체를 지우는 대신 필요한 부분만 지우면 성능이 향상됩니다.
또한 여러 캔버스를 사용하는 경우 캔버스를 지우는 횟수를 줄이면 성능이 향상됩니다.

4: GPU 사용하면 좋지 않아?

정답입니다. 재작성하는 공수가 있는 분은 webGL 사용합시다.
2D webGL 라이브러리로는 pixi.js, createJS가 유명합니다.