HTML Canvas

The <canvas> element provides a space in your HTML where graphics can be drawn, such as shapes, charts, animations, or games. While it’s often used with JavaScript, understanding its structure in HTML is essential.

What is Canvas?

The <canvas> tag defines a drawable region on a web page. It acts as a graphics container where you can use JavaScript to draw anything from simple lines to complex animations.

Why use Canvas?

Graphics: Build charts, diagrams, game element, and custom shapes.
Dynamics Visuals: useful for creating real-time animations or data visualizations.
Interactive content: Enables clickable maps, drawing apps, and more (when JavaScript is used).

Basic Syntax

				
					<canvas id="myCanvas" width="300" height="150"></canvas>

Key Attributes

Attribute	Purpose
`id`	Identifies the canvas for JavaScript access
`width`	Sets the canvas width in pixels
`height`	Sets the canvas height in pixels

Default canvas size is 300×150 pixels if no width or height is set.

CSS Styling Example

				
					canvas {
  border: 1px solid black;
}

Use CSS to visually style the canvas just like any other HTML element.

Simple Canvas Setup

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 2px dashed blue;
    }
  </style>
</head>
<body>

<h2>Basic Canvas Box</h2>
<canvas id="myCanvas" width="250" height="120"></canvas>

</body>
</html>

Conclusion

The <canvas> tag is the foundation for drawing in HTML. While it’s often paired with JavaScript for interactivity and rendering, it’s valuable to know its basic usage, structure, and styling possibilities in pure HTML.