fillRect(100,100,100,100) The first two 100s refer to the coordinates, and the last two 100s refer to the width and height.
Today I was learning HTML5 canvas and found that the coordinates and size of fillRect were always wrong. After studying for a long time, I found that the width and height of canvas must be inline in the canvas tag. I was depressed for a long time.
Wrong way 1:
Document
<script> <br>var c = document.getElementById ('mycanvas'); <br>var ctx = c.getContext("2d"); <br>ctx.fillStyle='#f36'; <br>ctx.fillRect(100, 100, 100, 100); <br></script>
Wrong way 2:
Document
< ;canvas id='mycanvas' style='width:200px;height:200px;background:yellow'>
<script> <br>var c = document.getElementById ('mycanvas'); <br>var ctx = c.getContext("2d"); <br>ctx.fillStyle='#f36'; <br>ctx.fillRect(100, 100, 100, 100); <br></script>