Introduction to HTML Graphics

Helps in creating a visually appealing web app
Mainly of two types HTML Canvas and HTML SVG

Canvas: A raster-based (bitmap area) graphics system ideal for dynamic, interactive graphics. Uses Javascript for creating graphics.
SVG (Scalable Vector Graphics): A vector-based system perfect for static, scalable images. Uses XML for creating graphics

Importance of HTML Graphics

HTML graphics enhance the user experience by making web pages more interactive and visually engaging.

Data visualization (charts, graphs)
Game development
Interactive animations
Custom user interface elements

Choosing Between Canvas and SVG:

Canvas is suitable for:

High-performance applications
Complex animations and games
Pixel-based manipulations

SVG is suitable for:

Scalable graphics that need to look sharp at any size
Graphics that require event handling
Static or less frequently updated images

1. Canvas:

Example:

<html>
<head>
   <title>Canvas Example</title>
</head>
   <body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'lightgreen';
ctx.fillRect(11, 10, 150, 100);
</script>
</body>
</html>

Output:

2. SVG:

Example:

<!DOCTYPE html>
<head>
   <title>SVG Example</title>
</head>
<body>
   <h1>SVG Example</h1>
   <svg width="500" height="500" style="border:1px solid #000000;">
       <!-- Draw a rectangle -->
       <rect x="50" y="50" width="200" height="100" fill="blue" />
   </svg>
</body>
</html>

Output: