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;" > w3wiki </ 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;" > w3wiki </ 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