캔버스 너비를 올바르게 선택하는 방법은 무엇입니까?

Question

나는 반응 캔버스 가지고 (this answer에 따라) 다음 코드를 사용하고 있습니다 : 실제 캔버스 요소 크기가 800이 아닌 때문에 잘 보이지 않는

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 
ctx.font = '52px verdana'; 
 
var text = 'Sample text'; 
 
var textWidth = ctx.measureText(text).width; 
 
ctx.fillText(text, 50, 50);

canvas { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <canvas id="canvas" width="800"> 
 
     Sorry, your browser doesn't support the &lt;canvas&gt; element. 
 
     </canvas> 
 
    </div> 
 
    </div> 
 
</div>

을하지만, 1140 (내 브라우저에서). 어떻게 든 창 크기를 감지하고 올바른 캔버스 크기 값을 할당해야하는 것 같습니다. 어떻게해야합니까? 최신 Twitter Bootstrap 라이브러리를 사용하고 있습니다.

Answer 1

망가 사용 CSS 스타일

ctx.canvas.width = window.innerWidth || document.body.clientWidth;