HTML Canvas - Height Property

The HTML Canvas height property of HTMLCanvasElement interface accepts a positive integer and then sets the height of the Canvas element layout.

It is passed as an attribute to the Canvas tag in HTML5 code. When the property is not given, the default value is used which is of 150. It basically controls the height of the Canvas element when used.

Possible input values

It accepts all positive integer values and sets the given value as height of the Canvas element in pixels.

Example

The following example demonstrates how the HTML Canvas height property of the Canvas element can be used to change dimensions of the Canvas.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas1" height="200" style="border: 1px solid blueviolet;"></canvas>
      <canvas id="canvas2" height="500" style="border: 1px solid green;"></canvas>
   </body>
</html>

Output

The program creates two canvases with different heights and shows how the property can change the layout of Canvas element. The above code returns the output on a new webpage as −

Example

The following example shows the height of the Canvas element in console as well as the window alert.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" height="350" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         console.log('Canvas height : ' + canvas.height);
         window.alert('canvas height is ' + canvas.height);
      </script>
</html>

Output

The program creates a canvas with input height and shows it on console and window alert. The above code returns the output by window alert as −

The output shown in console as −

The canvas formed by the above code on the webpage as −

html_canvas_element.htm