CODEWITHSUNDEEP
javascripthtmlheight
Skyyy
Skyyy

Reputation: 1569

Object.height returns half height

I have a canvas which height i am trying to get via JavaScript but it returns half height then the actual height

Here is the simple code i am using

var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");

document.getElementById("status").innerHTML = canvas.height;
console.log(canvas.height);
canvas#clock{
	width:300px;
	height:300px;
	border:#D50003 1px solid;
	background:#1E1E1E;
}
<canvas id="clock"></canvas>
<div id="status"></div>

Upvotes: 4

Views: 363

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074276

The canvas's width and height are not set by CSS, they're set by the width and height attributes of the canvas. You're seeing 150 because that's the default height. From MDN:

The HTMLCanvasElement.height property is a positive integer reflecting the height HTML attribute of the element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.

The CSS width and height define the layout space occupied by the canvas. If they don't match the canvas size, the canvas is scaled to fill the layout space. E.g., what you're doing in your code is taking a 300x150 canvas (default dimensions) and stretching it to fill a 300x300 area.

While you can get the height applied by the CSS by using getComputedStyle:

var height = getComputedStyle(canvas).height; // "300px"

...that's not the height of the canvas, that's the height it's occupying in your layout.

If you set the width and height on the canvas, you'll get back those values (and if they match the CSS, and your drawing won't be stretched/compressed):

var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");

document.getElementById("status").innerHTML = canvas.height;
console.log(canvas.height);
canvas#clock{
	width:300px;
	height:300px;
	border:#D50003 1px solid;
	background:#1E1E1E;
}
<canvas id="clock" width="300" height="300"></canvas>
<div id="status"></div>

Let's prove that the canvas in your original code is actually 300x150 being stretched to 300x300 by drawing a circle on it:

var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");

document.getElementById("status").innerHTML = canvas.height;
console.log(canvas.height);
var ctx = canvas.getContext('2d');

var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = ctx.strokeStyle = "blue";
ctx.fill(path);
canvas#clock {
  width: 300px;
  height: 300px;
  border: #D50003 1px solid;
  background: #1E1E1E;
}
<canvas id="clock"></canvas>
<div id="status"></div>

As you can see, the circle is distorted because we're using the default size of the canvas, 300x150, but stretching it to 300x300. If we specify the size, it's correct:

var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");

document.getElementById("status").innerHTML = canvas.height;
console.log(canvas.height);
var ctx = canvas.getContext('2d');

var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = ctx.strokeStyle = "blue";
ctx.fill(path);
canvas#clock {
  width: 300px;
  height: 300px;
  border: #D50003 1px solid;
  background: #1E1E1E;
}
<canvas id="clock" width="300" height="300"></canvas>
<div id="status"></div>

Upvotes: 5

Related Questions