There seems to be something wrong with the position and size of Canvas drawing ~

  html5, question

Styles and Scripts

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

HTML section

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

Rendered on the browser
图片描述

Why is it drawn like this, shouldn’t it be a rectangle 100px from the left, 100px from the top, and 100px in width and height?

The default width and height of canvas is 300*150. The definition of style inside actually scales him, so his width and height are generally set on the canvas attribute.