样式与脚本

<style>
    #canvas {
        width: 400px;
        height: 300px;
        border: 1px solid #999;
    }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(100, 100, 100, 100);
    }
</script>

HTML部分

<canvas id = "canvas">
</canvas>

浏览器上所呈现的

为什么绘制出来的会是这个样子的，不应该是距离左边100px, 距离上边 100px, 宽高都为100px的矩形吗？