W3Schools.com

HTML5 <canvas> width Attribute

HTML5 canvas Tag Reference HTML5 <canvas> tag

Example

A <canvas> element with a height and width of 200 pixels:

<canvas id="myCanvas" width="200" height="200" style="border:1px solid">

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The width attribute is supported in all major browsers.

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


Definition and Usage

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

Tip: Each time the height or width of a canvas is re-set, the canvas content will be cleared (see example at bottom of page).

Tip: Learn more about the <canvas> element in our HTML5 Canvas Tutorial.


Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.


Syntax

<canvas width="pixels">

Attribute Values

Value Description
pixels Specifies the width of the canvas, in pixels (e.g. "100"). Default width is "300"


Examples

Try it Yourself - Examples

Clear the canvas
How to clear the canvas by setting the width or height attribute (using JavaScript).


HTML5 canvas Tag Reference HTML5 <canvas> tag
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE