Open In App

HTML <canvas> width Attribute

Last Updated : 12 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <canvas> width Attribute is used to specify the width of the <canvas> in terms of pixels

Syntax: 

<canvas width="pixels"> 

Attribute Values: It contains the value i.e pixels which specify the width of the canvas in terms of pixel. It has a Default value which is 300. 

Example: This Example illustrates the use of width attribute in Canvas Element. 

html




<!-- HTML code to illustrate 
width attribute of canvas tag -->
<!DOCTYPE html>
<html>
  
<head>
    <title>HTML canvas Width attribute</title>
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>HTML Canvas Width Attribute</h2>
    <canvas id="geeks" 
            height="200"
            width="200" 
            style="border:1px solid black">
    </canvas>
  
    <script>
        var c = document.getElementById("geeks");
        var cx = c.getContext("2d");
        cx.beginPath();
        cx.arc(100, 100, 90, 0, 2 * Math.PI);
        cx.stroke();
    </script>
</body>
  
</html>


Output:

  

Supported Browsers:

  • Google Chrome 1.0
  • Firefox 1.5
  • Internet Explorer 9.0
  • Edge 12.0
  • Opera 9.0
  • Apple Safari 3.0

Previous Article
Next Article

Similar Reads

HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
HTML canvas ImageData width Property
The ImageData width property is used to return the width of an ImageData object, in pixels. Syntax: imgData.width; Example: In this example, we are using the above-explained property. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;h3 style=&quot;color:green&quot;&gt;GeeksforGeeks&lt;/h3&gt; &lt;h3&gt;HTML canvas ImageData width prop
1 min read
How to specify the width and height of the canvas using HTML ?
The &lt;canvas&gt; tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: &lt;canvas id="canvasID"&gt; HTML Contents... &lt;canvas&gt; Attributes: The canvas tag has two attributes which are listed below. he
2 min read
HTML &lt;canvas&gt; height Attribute
The HTML &lt;canvas&gt; height Attribute is used to specify the height of the &lt;canvas&gt; element in terms of pixels. Syntax: &lt;canvas height="pixels"&gt; Attribute Values: It contains single value pixels which specify the height of the canvas in terms of pixel. It has a Default value which is 150. Example: This example illustrates the use of
1 min read
Web HTMLCanvasElement API | Canvas Element width property
In Web API there is a canvas element which has an attribute of width which represents the width of the canvas in CSS pixels. There is a HTMLCanvasElement.width property by which we can fetch this width attribute from canvas element, which is a positive integer. Syntax: var widthVal = canvas.width; canvas.width = widthVal; Note: If the width attribu
2 min read
How to add stroke width of text canvas using Fabric.js ?
In this article, we are going to see how to add stroke width to the text canvas using FabricJS. The canvas means text written is movable, rotatable, resizable, and can be stretched. But in this article, we will add a stroke width. Further, the text itself cannot be edited like a textbox.Approach: To make it possible, we are going to use a JavaScrip
2 min read
How to set stroke width of a canvas circle using Fabric.js ?
In this article, we are going to see how to set the stroke width of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width or radius. Approach: To make it possible, we are going to use
2 min read
How to Set the height and width of the Canvas in HTML5?
The canvas element is a part of HTML5 which allows us for dynamic, scriptable rendering of 2D shapes and bitmap images, facilitating the creation of games, graphs, animations, and compositions. To set the height and width of the canvas in HTML5, we can utilize the height and width attributes within the &lt;canvas&gt; tag, specifying pixel values to
2 min read
HTML | &lt;iframe&gt; width Attribute
The HTML &lt;iframe&gt; width attribute is used to specify the width of the &lt;iframe&gt; in terms of pixels. Syntax: &lt;iframe width="pixels"&gt; Attribute Values: It contains single value pixel which specifies the width of the iframes in terms of pixels. Below example illustrates the use of &lt;iframe&gt; width attribute in HTML: Example: C/C++
1 min read
HTML | &lt;input&gt; width Attribute
The HTML &lt;input&gt; width Attribute is used to specify the width of the &lt;input&gt; element. This Attribute is only used for input type="image". Syntax: &lt;input width="pixels"&gt; Attribute Values: It contains the value i.e pixels which specify the width of the input Element. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body st
1 min read