HTML Reference Manual

Complete List of HTML Tags

HTML canvas width attribute

The width attribute specifies the width of the <canvas> element in pixels, using the width attribute to specify the width of the <canvas> element in pixels.

HTML <canvas> tag

Online Examples

Height and width are200-pixel <canvas> element:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> width Attribute Usage-Basic Tutorial(oldtoolbag.com)</title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
</<script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the width attribute.

Note: Internet Explorer 8 and earlier IE versions do not support the <canvas> tag.

Definition and Usage

The width attribute specifies the width of the <canvas> element in pixels.

Tip: Use the width attribute to specify the width of the <canvas> element in pixels.

Tip: When the height or width of the canvas is reset, the content of the canvas is cleared (see the example at the bottom of the page).

Tip: Please visit our HTML Canvas Learn more about <canvas> in the HTML tutorial.

HTML 4.01 with HTML 5 differences

<canvas> is an HTML5 of the new tag.

Syntax

<canvas width="pixels">

Attribute Value

Value	Description
pixels	Specify the canvas's width attribute, in pixels (such as"100) Default width is "300"

More Examples

Clear the canvas by setting the width or height attribute (using JavaScript):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> width Attribute Usage-Basic Tutorial(oldtoolbag.com)</title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
function clearCanvas() {
　　c.height =　300;
}
</<script>
<button onclick="clearCanvas()">Clear canvas</button>/button>
</body>
</html>

Test to see ‹/›

HTML <canvas> tag

HTML: <template> tag