A ver como explico esto. Al dibujar un canvas, cuando modificas el "height", lo modifica partiendo desde la base y no desde arriba, o almenos es lo que me hace en este codigo, que tambien estoy probando en el tryit de w3scholl y me pasa igual.
Código:
<!DOCTYPE html>
<html>
<body>
<div id="header-inner" style="width: 900px; height: 130px; background-color: #000000;">
</div>
<div id="nav" style="width: 900px; height: 40px; background-color: #dd1b24;">
<div class="internav"></div>
<div class="social">
<div id="face"><a href=""></a></div>
<div id="twitt"><a href=""></a></div>
<div id="you"><a href=""></a></div>
</div>
</div>
<canvas id="myCanvas" width="900" height="1" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>