Web HTMLCanvasElement API | CanvasElement height property
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
Last Updated :
31 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...