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> 