Canvas 绘图的位置和大小好像不大对劲~

Question

样式与脚本

<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的矩形吗？

Answer 1

宽高是代表画布的大小，不代表他里面的坐标系的大小 感觉上是这样的应该有个像素和坐标的比 或者规定这么大的画布里面坐标系的范围

Answer 2

canvas默认宽高为300*150，样式里定义其实是对他进行了缩放，所以一般是在canvas的属性上设置他的宽高