HTML5: How to specify the width of the canvas?

Last update on February 06 2024 11:32:06 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to specify the width of the canvas</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<style><!-- Start of inline CSS styling -->
#FirstCanvas{ <!-- Styles for the canvas element with id "FirstCanvas" -->
width: 500px; <!-- Width of the canvas -->
height: 300px; <!-- Height of the canvas -->
border: 3px solid green; <!-- Border styling for the canvas -->
background-color: orange; <!-- Background color of the canvas -->
} <!-- End of styles for #FirstCanvas -->
</style><!-- End of inline CSS styling -->
<body><!-- Start of body section -->
<canvas id="FirstCanvas"></canvas><!-- Canvas element with id "FirstCanvas" -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration indicating it's an HTML5 document.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as character encoding and the title.
Within the head section, there's an inline <style> element for defining CSS styles.
The CSS styles define the appearance of the canvas element with the id "FirstCanvas". It sets the width, height, border, and background color of the canvas.
The <body> section is where the visible content of the webpage resides.
Within the body section, there's a canvas element with the id "FirstCanvas". It will be used to draw graphics or display other visual content.
The HTML document ends with the closing </html> tag.

Live Demo:

See the Pen canvas-width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page