CODEWITHSUNDEEP
javascripthtmlcsscanvas
Robinson
Robinson

Reputation: 10122

Canvas same size as parent

I have a nice HTML layout with a left bar, right bar and centre area. The left bar has a top and bottom label for text and (when uncommented) a vertically central canvas. The layout does actually resize itself nicely when the browser window size changes.

When I uncomment the canvas and try to fit it to the parent size using JavaScript handling the resize message, it somehow prevents the layout from sizing itself according to the window extents. Instead the window gains a vertical scrollbar and the layout is no longer "100%" but more than the viewport size.

The code in question looks something like this:

<tr style="height: 80%;">
    <td align="center" id="controlparent" bgcolor="#E6E6FA">
        <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
    </td>
</tr>

What mistake did I make?

(Please note I'm now doing the layout with an HTML table - I've tried CSS for layout and it's too painful for words to a beginner).

Here's my fiddle.

Upvotes: 1

Views: 1820

Answers (1)

user1693593
user1693593

Reputation:

Canvas width and height attributes (and properties) are always given as pixels without any units.

If you don't want to use CSS, in which case you would use the style="width:100%;height:100%" attribute inside the element, you would need to calculate the width/height of parent using JavaScript.

To calculate parent size using JavaScript:

var ctrl = document.getElementById("control"),
    parentSize = ctrl.parentNode.getBoundingClientRect();

ctrl.width  = parentSize.width;
ctrl.height = parentSize.height;
html, body {width:100%; height:100%; margin:0}
<tr style="height: 80%;">
  <td align="center" id="controlparent" bgcolor="#E6E6FA">
    <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
  </td>
</tr>

Upvotes: 3

Related Questions