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
  • 11,350
  • 21
  • 67
  • 104

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
  • 3,771
  • 1
  • 29
  • 39