HTML Tutorial
HTML Graphics
HTML provides several ways to add graphics and drawings to your web pages. You can use images, vector graphics, or dynamic drawings with the <canvas> element.
1. Images
Images are the most common graphics element in HTML.
<img src="image.jpg" alt="Description" width="300" height="200">
Important Image Attributes
| Attribute | Description |
|---|---|
src |
File path or URL of the image |
alt |
Text shown if the image fails to load |
width / height |
Resize the image |
loading="lazy" |
Loads image only when needed |
2. Canvas (HTML5)
The <canvas> element allows you to draw graphics dynamically using JavaScript.
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>
Example: Drawing a Rectangle
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);
</script>
3. SVG (Scalable Vector Graphics)
SVG is an XML-based format to create vector graphics that scale without losing quality.
Example:
4. Other Graphics Tags
| Tag | Purpose |
|---|---|
<svg> |
Vector graphics |
<canvas> |
Dynamic drawing using JavaScript |
<img> |
Static images |
<figure> |
Group media elements |
<figcaption> |
Caption for images or graphics |
5. Example: Combining Image and Caption
<figure>
<img src="flower.jpg" alt="Flower" width="300">
<figcaption>Beautiful flower in bloom</figcaption>
</figure>