width property

This topic has not yet been rated - Rate this topic

Gets or sets the width 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.10

Syntax

JavaScript

object.width = width

width = object.width

Property values

Type: Integer

The width of a canvas element, in pixels.

Standards information

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

 

 

Build date: 11/28/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.