Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

height property

Gets or sets the height of a canvas element on a document.

This property is read/write.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10Internet Explorer 9

Syntax

JavaScript

object.height = height

height = object.height

Property values

Type: Integer

The height of a canvas element, in pixels.

Standards information

Remarks

Note  The maximum size of the rendered area on a canvas is from 0,0 to 8192 x 8192 pixels, regardless of the size of the canvas. For example, a canvas is created with a width and height of 8292 pixels. A rectangular fill is then applied as "ctx.fillRect (0,0, canvas.width, canvas.height)".Only the area within the coordinates (0, 0, 8192, 8192) can be rendered, leaving a 100 pixel border on the right and bottom of the canvas.

Note  When sizing a canvas, use the canvas width and height properties to get your initial size. You can use CSS to set the width and height, but it will scale the image rather than set the canvas size itself. The default width and height are 300px by 150px.

Examples

The following code example uses the width and height property to get and set the attributes of a canvas element on the document.


<html>
    
<head>
    <title>Height example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.fillStyle = "blue";
              ctx.fillRect(0, 0, canvas.width, canvas.height);
          }
      }
      function change(val) {
          var canvas = document.getElementById("MyCanvas");
          canvas.width = canvas.width + val;
          canvas.height = canvas.height + val;
          draw();
      }
  </script>
</head>
<body onload="draw();"  >
      <div>
      <button onclick="change(10)">Make canvas 10px larger</button>
      <button onclick="change(-10)">Make canvas 10px smaller</button>
      </div>      
      <div>
        <canvas id="MyCanvas" width="500" height="500" >This browser or document mode doesn't support canvas</canvas>
      </div>
  </body>
</html>


See also

canvas

 

 

Show:
© 2014 Microsoft