HTML5: How to draw graphics, on the fly, via scripting?

Last update on February 06 2024 11:32:07 (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 use to draw graphics, on the fly, via scripting</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
Canvas <!-- Text indicating the presence of a canvas -->
<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 red; <!-- Border styling for the canvas -->
background-color: blue; <!-- Background color of the canvas -->
} <!-- End of styles for #FirstCanvas -->
</style><!-- End of inline CSS styling -->
<body><!-- Start of nested body section (incorrectly nested, corrected below) -->
<canvas id="FirstCanvas"></canvas><!-- Canvas element with id "FirstCanvas" -->
</body><!-- End of nested 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 on the fly via scripting.
The HTML document ends with the closing </html> tag. Note: There was an error in the original code where the <body> tag was nested twice. I corrected it to have only one <body> tag.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page