0

I have the following HTML with a canvas embedded in a fieldset. Why does the fieldset and canvas with overflow the enclosing div dimensions? I basically want the fieldset and canvas to reside within the dimensions of the enclosing div. If I remove the "canvas" element, then it sizes properly. What am I not understanding here/

<body>
  <div id="commandGrp" style="position:relative;float:left;width:100px;height:100px">
     <fieldset><legend>Commands</legend>
        <canvas id="CommandCanvas" >

        </canvas>
     </fieldset>
  </div>
</body>

Here is a screenshot with the Chrome element inspector so you can see the div size. You can see the div#commandGrp div is the size I defined it but the enclosing fieldset and canvas are way bigger.

enter image description here

GregH
  • 12,278
  • 23
  • 73
  • 109

1 Answers1

1

I'm afraid it's down to the HTML specification and default sizes on canvas. See this similar Stack Overflow question for links and solutions.

canvas default size

Community
  • 1
  • 1
Andrew Hodgkinson
  • 4,379
  • 3
  • 33
  • 43