Web HTMLCanvasElement API | Canvas Element width property
Last Updated :
01 Nov, 2019
In Web API there is a canvas element which has an attribute of width which represents the width of the canvas in CSS pixels. There is a HTMLCanvasElement.width property by which we can fetch this width attribute from canvas element, which is a positive integer.
Syntax:
var widthVal = canvas.width;
canvas.width = widthVal;
Note: If the width attribute value is not provided or is set to undefined value, like a negative value then the default value is set to 300.
Example 1: width attribute set to 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 >
|
Output:
Click the button:
When the button is clicked:
Example 2: Width attribute not provided
<!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 >
|
Output:
Click the button:
When the button is clicked:
Supported Browsers:
- Google Chrome 4
- Edge 12
- Internet Explorer 9
- Firefox 3.6
- Safari 3.1
- Opera 9
Share your thoughts in the comments
Please Login to comment...