width

Summary

Width property of canvas element.

Property of dom/HTMLCanvasElement dom/HTMLCanvasElement

Syntax

var result = element.width;
element.width = value;

Examples

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

<!DOCTYPE html>
<head>
  <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()" bgcolor="lightgray" >
      <div>
      <button onclick="change(10)">Make canvas larger</button>
      <button onclick="change(-10)">Make canvas smaller</button>
      </div>
      <div>
        <canvas id="MyCanvas" width="500" height="500" > </canvas>
      </div>
  </body>
</html>

width

Summary

Syntax

Examples

Syntax

Standards information

See also

Related pages

Attributions