调整画布大小以匹配父div

Question

我正在尝试调整canvas元素的大小以适合父div。不知何故，它弄乱了我的布局。我不明白为什么绿松石div向下移动。你能解释一下我做错了什么吗？ 我的代码：http://jsfiddle.net/6t73bmz4/

CSS：

p {
    font-size: 3vh;
}

li {
    padding-right: 1vh;
    display: inline-block;
}
#tabelle {
    background-color: palegreen;
    height: 10vh;
}

#left {
    background-color: paleturquoise;
    width: 30%;
    height: 66vh;
    display: inline-block;
}

#right {
    background-color: palevioletred;
    width: 70%;
    height: 66vh;
    display: inline-block;
}

HTML：

<h2>Heading</h2>   

<div id="left">
    <canvas id="canvas" style="background-color:black;">

    </canvas>
</div><div id="right">
    <canvas>

    </canvas>
</div><div id="tabelle">
    <ul>
        <li>
            <p>123</p>
        </li>
        <li>
            <p>321</p>
        </li>
    </ul>
</div>

脚本：

var c = document.getElementById("canvas");
var ctx    = c.getContext('2d');
c.width = '#left'.clientWidth;
c.height = '#left'.clientHeight;

此致 卢卡斯