En HTML hay un elemento de lienzo que tiene un atributo de altura que representa la altura del lienzo en píxeles CSS. Hay una propiedad HTMLCanvasElement.height mediante la cual podemos obtener este atributo de altura del elemento canvas, que es un número entero positivo .
Sintaxis:
var heightVal = canvas.height; canvas.height = heightVal;
Nota: si el valor del atributo de altura no se proporciona o se establece en un valor indefinido, como un valor negativo, el valor predeterminado se establece en 150.
Ejemplo 1: Atributo de altura establecido en 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>
Salida:
Haga clic en el botón:
Cuando se hace clic en el botón:
Ejemplo 2: atributo de altura no proporcionado
<!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>
Salida:
Haga clic en el botón:
Cuando se hace clic en el botón:
Navegadores compatibles:
- Google cromo 4
- Borde 12
- Firefox 3.6
- Safari 3.1
- Ópera 9
- explorador de Internet 9