このコードのキャンバスサイズが期待どおりでないのはなぜですか？

Question

https://jsfiddle.net/awguo/uw1x8m3y/

ここは詳細なデモです。

私はdiv＃ラッパーにimgを入れ、そのラッパーの中にこのimgのキャンバスオーバーラップを入れます。 imgとcssの幅と高さを両方とも100％に設定しました。次に、キャンバスの幅*高さを追跡します。予想通り（350x350）ではなく350x354です。なぜ "4px"以上のものがあるのですか？私はまた、親のdivの幅に応じて延伸されてもよい画像とまったく同じキャンバスサイズを（作るにはどうすればよいですか？

ありがとう！

$(function() { 
 
    // Why it's 350x354, not 350x350? 
 
    var output = 'canvas size: ' + ($('#overlap').css('width') + ' x ' + $('#overlap').css('height')); 
 
    $('#output').val(output); 
 
});

#wrapper { 
 
    position: relative; 
 
    width: 350px; 
 
} 
 
#wrapper img { 
 
    width: 100%; 
 
} 
 
#overlap { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
#output { 
 
    width: 350px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <img src="http://www.awflasher.com/300x300_demo.png" /> 
 
    <canvas id="overlap"></canvas> 
 
</div> 
 

 
<h3> 
 
    Output: 
 
    </h3> 
 
<input id="output" type="text" /> 
 

 
<p> 
 
    Why the output is 350x354, not 350x350 as expected? 
 
</p>

Answer 1

メイク画像の表示inline-blockかblock。デフォルトではinlineあるとbaselineにvertical-align編を取得し、それは余分な狂気0.5em高さを取得します。

$(function() { 
 
    // Why it's 350x354, not 350x350? 
 
    var output = 'canvas size: ' + ($('#overlap').css('width') + ' x ' + $('#overlap').css('height')); 
 
    $('#output').val(output); 
 
});

#wrapper { 
 
    position: relative; 
 
    width: 350px; 
 
} 
 
#wrapper img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
#overlap { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
#output { 
 
    width: 350px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <img src="http://www.awflasher.com/300x300_demo.png" /> 
 
    <canvas id="overlap"></canvas> 
 
</div> 
 

 
<h3> 
 
    Output: 
 
</h3> 
 
<input id="output" type="text" /> 
 

 
<p> 
 
    Why the output is 350x354, not 350x350 as expected? 
 
</p>