음악, 삶, 개발

https://stackoverflow.com/questions/16191324/performance-problems-with-html5-canvas-in-some-mobile-browsers https://stackoverflow.com/questions/38069462/html5-canvas-save-and-restore-performance

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.re..