What is Graphics in HTML5?

In HTML5, graphics can be drawn using two graphics elements.

1. Canvas element:

It is a graphics element that is used to draw shapes using JavaScript. It has several methods for drawing paths, boxes, circles, and even add images.

Example

<canvas id="myCanvas" width="100" height="100"></canvas>

The above canvas code designs a square with 100 by 100 size.

2. SVG (Scalable Vector Graphics):

SVG is based on vector graphics. It is used to define graphics in XML format. Graphics designed by SVG doesn’t lose quality when zoomed in or resized.

Example

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

The above HTML code designs a circle.