HTML5 Graphics

« Prev
Feature <canvas> <svg>
Type Immediate (pixel-based) rendering Retained (vector-based) graphics
Scriptable Requires JavaScript for drawing XML-like markup structure (can use JS too)
Resolution Fixed resolution Scalable without losing quality
Interaction Needs manual handling Built-in event support on elements
Use Cases Games, animations, image processing Charts, diagrams, icons, UI graphics

<canvas> — Drawing via JavaScript

Syntax

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

Example: Draw a Circle with Canvas

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

<script>
  const canvas = document.getElementById('circleCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);  // x, y, radius
  ctx.fillStyle = 'skyblue';
  ctx.fill();
  ctx.stroke();
</script>
Run ›

<svg> tag - Scalable Vector Graphics

The <svg> tag defines vector-based graphics in XML format that can scale without losing quality. It's perfect for UI icons, charts, illustrations, and even animations.

 

Syntax

<svg width="400" height="200">
  <!-- SVG shapes go here -->
</svg>

Example

<svg width="200" height="200" style="border:1px solid #000;">
  <circle cx="100" cy="100" r="50" fill="skyblue" stroke="black" />
</svg>
Run ›
« Prev

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.