Skip to content
Related Articles

Related Articles

Web HTMLCanvasElement API | CanvasElement height property
  • Last Updated : 31 Oct, 2019

In HTML there is a canvas element which has an attribute of height which represents the height of the canvas in CSS pixels. There is a HTMLCanvasElement.height property by which we can fetch this height attribute from canvas element, which is a positive integer.

Syntax:

var heightVal = canvas.height;
canvas.height = heightVal;

Note: If the height attribute value is not provided or is set to undefined value, like a negative value then the default value is set to 150.

Example 1: Height attribute set to 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>

Output:
Click the button:



When the button is clicked:

Example 2: Height attribute not provided




<!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>

Output:
Click the button:

When the button is clicked:

Supported Browsers:

  • Google Chrome 4
  • Edge 12
  • Firefox 3.6
  • Safari 3.1
  • Opera 9
  • Internet Explorer 9

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :