En Web API hay un elemento de lienzo que tiene un atributo de ancho que representa el ancho del lienzo en píxeles CSS. Hay una propiedad HTMLCanvasElement.width mediante la cual podemos obtener este atributo de ancho del elemento canvas, que es un número entero positivo .
Sintaxis:
var widthVal = canvas.width; canvas.width = widthVal;
Nota: si el valor del atributo de ancho no se proporciona o se establece en un valor indefinido, como un valor negativo, el valor predeterminado se establece en 300.
Ejemplo 1: atributo de ancho establecido en 500
<!DOCTYPE html>
<html>
<head>
<style>
a:focus {
background-color: magenta;
}
</style>
<canvas id="canvas" width="500" height="300"></canvas>
<script type="text/javascript">
function getwidth() {
var canvas = document.getElementById('canvas');
document.getElementById('width').innerHTML = canvas.width;
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Canvas Element width property</h2>
<button onclick="getwidth ();">Get Width</button>
<p id='width'></p>
</center>
</body>
</html>
Salida:
Haga clic en el botón:
Cuando se hace clic en el botón:
Ejemplo 2: atributo de ancho no proporcionado
<!DOCTYPE html>
<html>
<head>
<style>
a:focus {
background-color: magenta;
}
</style>
<canvas id="canvas"></canvas>
<script type="text/javascript">
function getwidth() {
var canvas = document.getElementById('canvas');
document.getElementById('width').innerHTML = canvas.width;
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Canvas Element width property</h2>
<button onclick="getwidth ();">Get Width</button>
<p id='width'></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
- explorador de Internet 9
- Firefox 3.6
- Safari 3.1
- Ópera 9