<p>240x157 png가 있고 div 크기는 120x88</p><p>그래서 240x157 캔버스를 만들고 png를 붙여넣었습니다. </p><p>div의 크기는 png보다 작지만 div에 스크롤 막대가 있고 드래그 막대를 사용하면 전체 이미지를 볼 수 있습니다. 이것은 완벽 해요.

<p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("테스트") var chara = 새 이미지(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0"; chara.onload = () => ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#전체{ 테두리:1px 솔리드; 너비:120px; 높이:78px; 오버플로:스크롤; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트> <div id="전체"> <canvas id="test" width="240px" height="157px"></canvas> </div></pre> <p><br /></p> <p>저의 궁극적인 목표는 사용자가 크기를 변경하는 것인데, 이미지가 div보다 커지면 포토샵처럼 스크롤 막대가 나타납니다. </p><p>그래서 1/2 스케일을 테스트한 결과 전체 이미지가 129 x78</p> 영역에서 성공적으로 보이는 것을 확인했습니다. </p><p>왜 이런 일이 발생하는 걸까요?</p><p>제가 이해한 바에 따르면 캔버스 크기가 240x157이고 비율이 1/2이면 왜 그림만 축소되어 나타나는 걸까요? 캔버스 자체가 아니라?</p><p><code></code><code></code></p> <p><br /></p> <pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d'); console.log("테스트") var chara = 새 이미지(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0"; ctx.scale(1/2,1/2) // 여기에 추가합니다. chara.onload = () => ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }</pre> <pre class="brush:css;toolbar:false;">#전체{ 테두리:1px 솔리드; 너비:120px; 높이:78px; 오버플로:스크롤; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트> <div id="전체"> <canvas id="test" width="240px" height="157px"></canvas>