CODEWITHSUNDEEP
htmlheightwidthhtml5-canvas
Edward Moss
Edward Moss

Reputation: 3

.height/width of div returning different values into canvas

Above is a test website I'm trying out the new HTMl5 canvas tag. I've stripped it down a bit just to make the relevant code easier to locate.

The issue I'm having is when setting the width and height of the canvas the values I'm getting back with the .height and .width methods are larger than the div I'm trying to get them from causing the canvas to overrun the encapsulating div.

Link to JSbin:

http://jsbin.com/ejivux/13/edit

Code just incase people want it in here:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div id="container">

     <div id="leftColumn">

        text

      </div>

      <div id="rightColumn">

      </div>

    </div>
  </body>
</html>

CSS:

canvas{
  border-width:5px;
  border-style:solid;
}

html{
  height:99%;
  background-color:red;
}

body{
  height:99%;
  background-color:blue;
}

#container{
  background-color:yellow;
  min-width:976px;
  min-height:99%;
  height:100%;
}

#leftColumn{
  background-color:pink;
  width:50%;
  min-height:100%;
  height:100;
  float:left;
}

#rightColumn{
  background-color:green;
  width:50%;
  min-height:100%;
  height:100%;
  float:left;
}

JS:

var canvasDiv = document.getElementById('rightColumn');
canvas = document.createElement('canvas');
canvas.setAttribute('width', $('#rightColumn').width());
canvas.setAttribute('height', $('#rightColumn').height());
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);

Upvotes: 0

Views: 168

Answers (1)

robertc
robertc

Reputation: 75777

Your canvas has a 5px border:

canvas{
  border-width:5px;
  border-style:solid;
}

So if you set the width of the canvas to that of the containing div I would expect the overall width of the canvas to be 10px more than the div because of the border on both sides. Try this:

canvas.setAttribute('width', $('#canvasDiv').width()-10);
canvas.setAttribute('height', $('#canvasDiv').height()-10);

Upvotes: 1

Related Questions