How to specify the width and height of the canvas using HTML ? Last Updated : 30 Sep, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report The <canvas> 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: <canvas id="canvasID"> HTML Contents... <canvas> Attributes: The canvas tag has two attributes which are listed below. height: This attribute is used to set the height of canvas. width: This attribute is used to set the width of canvas. Example 1: HTML <!-- HTML code to illustrate height and width attribute of canvas tag --> <!DOCTYPE html> <html> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to specify the width and height of the canvas? </h3> <canvas id="canvasID" height="200" width="200" style="border:1px solid black"> </canvas> </body> </html> Output: Example 2: HTML <!-- HTML code to illustrate height and width attribute of canvas tag --> <!DOCTYPE html> <html> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to specify the width and height of the canvas? </h3> <canvas id="canvasID" height="200" width="200" style="border:1px solid black"> </canvas> <script> var canvas = document.getElementById("canvasID"); // Getting a drawing context in the canvas var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 90, 0, 2 * Math.PI); context.stroke(); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Set the height and width of the Canvas in HTML5? V vkash8574 Follow Improve Article Tags : Web Technologies HTML HTML-Canvas Similar Reads 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 2 min read How to specify the width and height of the object in HTML5? The <object> tag is used to display multimedia like audio, videos, images, PDFs, and Flash in web pages. It can also be used for displaying another webpage inside the HTML page. The <param> tag is also used along with this tag to define various parameters. Any text that is written within 1 min read How to Set Width and Height of an Image using HTML? When adding images to a webpage, it's important to set their dimensions using the height and width attributes in HTML. Without these dimensions, the browser won't know how much space to reserve for the image, which can cause layout shifts that disrupt the viewing experience. Note: Always specify the 2 min read How to set the height and width of the video player in HTML5 ? In this article, we will learn to set the width and height of the video player in HTML5. The following are the two scenarios The width and height of the video are fixed.Make the video respond to your screen width. Approach: The HTML5 width and height attributes of the video tag are used to set the h 2 min read How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 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. A 2 min read Like