솔루션 : CSS 및 JavaScript를 사용한 자동 스케일링

:

1. • 함수를 조정하십시오. var ctx = (캔버스 컨텍스트); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerheight; // 여기에 코드 그리기 ... }

     function draw() {
       var ctx = (your canvas context);
       ctx.canvas.width = window.innerWidth;
       ctx.canvas.height = window.innerHeight;
       // Drawing code here...
     }

2. css

   • 컨테이너에 대한 css를 정의합니다. 너비 : 100%; 높이 : 100%; 여백 : 0; }

     html, body {
       width: 100%;
       height: 100%;
       margin: 0;
     }

html과 바디 요소를 전체 너비와 높이로 설정하여 는 창에 맞게 제한됩니다. 스크립트는 항상 크기를 동적으로 조정하여 항상 완벽하게 맞습니다.

이 솔루션은 성능에 미치는 영향을 최소화하는 것으로 입증되었으므로 재판용 캔버스를 생성하는 효율적인 방법입니다.