Skip to main content
width property

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 Internet Explorer 9




object.width = width

width = object.width


Property values

Type: Integer

The width of a canvas element, in pixels.

Standards information


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.


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

    <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;
<body onload="draw();"  >
      <button onclick="change(10)">Make canvas 10px larger</button>
      <button onclick="change(-10)">Make canvas 10px smaller</button>
        <canvas id="MyCanvas" width="500" height="500" >This browser or document mode doesn't support canvas</canvas>

See also