Как правильно выбрать ширину холста?

Question

Я использую следующий код (в соответствии с this answer) иметь адаптивный холст:

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>

Это не выглядит хорошо, потому что фактический размер холста элемент не 800, а 1140 (в моем браузере). Похоже, я должен каким-то образом определить размер окна и присвоить правильное значение размера холста. Как я должен это делать? Я использую последнюю библиотеку Twitter Bootstrap.

Answer 1

Dont использовать CSS стиль

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