Skip to content
Related Articles

Related Articles

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :