Loading

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: