HTML Graphics

Master dynamic visual rendering and illustration creation through native HTML capabilities

HTML delivers robust mechanisms generating graphical content directly within documents, eliminating external image dependencies. These graphics technologies enable shape construction, motion sequences, data visualization, and JavaScript-powered interactive visual components.

HTML Graphics Technologies

HTML supports several technologies for creating and displaying graphics:

HTML Canvas

Canvas elements provide JavaScript-driven bitmap rendering surfaces. This raster-based graphics system enables:

  • Draw shapes (rectangles, circles, lines, paths)
  • Add text and images
  • Create animations and games
  • Manipulate pixels directly
  • Build charts and data visualizations

SVG (Scalable Vector Graphics)

SVG constitutes an XML-derived specification establishing vector graphic definitions. These resolution-agnostic visuals maintain fidelity across scaling operations. SVG capabilities include:

  • Create scalable shapes and paths
  • Apply gradients and filters
  • Animate elements with CSS or JavaScript
  • Create interactive graphics
  • Build logos and icons

🖼️ Other Graphics Options

Additional ways to add graphics to HTML pages:

  • CSS: Create shapes, gradients, and effects
  • Images: Use img element for photos and illustrations
  • WebGL: 3D graphics rendering (advanced)
  • Libraries: D3.js, Chart.js, Three.js, etc.

HTML Canvas Introduction

The <canvas> element provides a drawing surface in HTML. By default, it has no border and no content.

Basic Canvas Element

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

Key points about Canvas:

  • Always specify an id attribute to reference it in JavaScript
  • Always specify width and height attributes
  • The fallback content is shown in browsers that don't support canvas
  • All drawing is done with JavaScript using the Canvas API
  • Canvas uses immediate mode rendering (pixel-based)

Simple Canvas Example

Drawing a Rectangle

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

Result:

SVG Introduction

SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format that can be directly embedded in HTML.

Basic SVG Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Result:

Key points about SVG:

  • Scalable without losing quality (resolution-independent)
  • XML-based, can be created and edited with text editors
  • Every element is part of the DOM (can be styled with CSS)
  • Best for logos, icons, and illustrations
  • Supports animations and interactivity

Canvas vs SVG

Both Canvas and SVG are used for creating graphics, but they have different strengths and use cases:

Feature Canvas SVG
Type Raster/Bitmap (pixel-based) Vector (shape-based)
Scalability Not scalable (pixelated when zoomed) Perfectly scalable
DOM Not part of DOM (single element) Each shape is a DOM element
Event Handling Manual coordinate tracking Event handlers on elements
Performance Better for many objects (pixel manipulation) Slower with many objects (DOM overhead)
Text Support Limited (renders as pixels) Excellent (text is selectable)
Best For Games, pixel manipulation, animations Icons, logos, charts, diagrams
API JavaScript Canvas API XML markup or JavaScript DOM

When to Use Canvas

  • Creating games with many moving objects
  • Real-time data visualization
  • Photo editing and filters
  • Particle systems and complex animations
  • Pixel-level manipulation required

When to Use SVG

  • Creating logos and icons
  • Static or simple interactive graphics
  • Charts and diagrams
  • Graphics that need to scale (responsive design)
  • Need accessibility (screen readers can read SVG)

Graphics Examples

Canvas Example - Drawing Shapes

<canvas id="shapeCanvas" width="300" height="200" style="border:1px solid #000;">
</canvas>

<script>
  var canvas = document.getElementById("shapeCanvas");
  var ctx = canvas.getContext("2d");

  // Rectangle
  ctx.fillStyle = "#FF6347";
  ctx.fillRect(20, 20, 100, 80);

  // Circle
  ctx.beginPath();
  ctx.arc(200, 60, 40, 0, 2 * Math.PI);
  ctx.fillStyle = "#4CAF50";
  ctx.fill();

  // Line
  ctx.beginPath();
  ctx.moveTo(20, 150);
  ctx.lineTo(280, 150);
  ctx.strokeStyle = "#2196F3";
  ctx.lineWidth = 5;
  ctx.stroke();
</script>

Result:

SVG Example - Multiple Shapes

<svg width="300" height="200">
  <!-- Rectangle -->
  <rect x="20" y="20" width="100" height="80" fill="#FF6347" />

  <!-- Circle -->
  <circle cx="200" cy="60" r="40" fill="#4CAF50" />

  <!-- Line -->
  <line x1="20" y1="150" x2="280" y2="150" stroke="#2196F3" stroke-width="5" />
</svg>

Result:

Common Use Cases for HTML Graphics

📊 Data Visualization

  • Bar charts and line graphs
  • Pie charts and donut charts
  • Real-time dashboards
  • Network diagrams

🎮 Games and Animations

  • 2D games (platformers, puzzles)
  • Animated sprites
  • Particle effects
  • Interactive simulations

🖼️ Image Processing

  • Photo filters and effects
  • Image cropping and resizing
  • Color manipulation
  • Drawing and painting apps

📈 Business Graphics

  • Infographics
  • Organizational charts
  • Floor plans
  • Interactive maps

Getting Started with HTML Graphics

To start creating graphics in HTML, you need to understand:

  1. Basic HTML structure: How to add canvas or SVG elements to your page
  2. JavaScript fundamentals: For Canvas, all drawing is done with JavaScript
  3. Coordinate system: Understanding x,y coordinates and how they work
  4. Drawing methods: Different functions for shapes, paths, text, and images
  5. Styling: Colors, gradients, patterns, and transparency

💡 Next Steps

Continue learning about HTML graphics:

  • HTML Canvas: Learn the Canvas API in detail
  • HTML SVG: Master SVG syntax and techniques
  • Practice: Build small projects to apply your knowledge

Test Your Knowledge