In HTML there is a canvas element which has an attribute of height which represents the height of the canvas in CSS pixels. There is a HTMLCanvasElement.height property by which we can fetch this height attribute from canvas element, which is a positive integer.
Syntax:
var heightVal = canvas.height; canvas.height = heightVal;
Note: If the height attribute value is not provided or is set to undefined value, like a negative value then the default value is set to 150.
Example 1: Height attribute set to 300
<!DOCTYPE html> <html>
<head>
<style>
a:focus {
background-color: magenta;
}
</style>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
function getHeight() {
var canvas = document.getElementById('canvas');
document.getElementById('height').innerHTML = canvas.height;
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Canvas Element height property</h2>
<button onclick="getHeight ();">Get Height</button>
<p id='height'></p>
</center>
</body>
</html>
|
Output:
Click the button:
When the button is clicked:
Example 2: Height attribute not provided
<!DOCTYPE html> <html>
<head>
<style>
a:focus {
background-color: magenta;
}
</style>
<canvas id="canvas"></canvas>
<script type="text/javascript">
function getHeight() {
var canvas = document.getElementById('canvas');
document.getElementById('height').innerHTML = canvas.height;
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Canvas Element height property</h2>
<button onclick="getHeight ();">Get Height</button>
<p id='height'></p>
</center>
</body>
</html>
|
Output:
Click the button:
When the button is clicked:
Supported Browsers:
- Google Chrome 4
- Edge 12
- Firefox 3.6
- Safari 3.1
- Opera 9
- Internet Explorer 9
Article Tags :