Graphical Elements

In HTML5 we can draw graphics using HTML elements instead of depending on images or third-party components like Flash.

There are the following two type of graphics elements:
  • Canvas
  • Scalable Vector Graphics (SVG)
Canvas Element
The <canvas> element:
  • helps the browser to draw shapes and images without any plugin.
  • is used to draw graphics, on the fly, via scripting.
  • has several methods for drawing paths, boxes, circles, characters and adding images.
The following is a sample of drawing a rectangle using a Canvas Element:
      body {
        margin: 0px;
        padding: 0px;
    <canvas id="myCanvas" width="1000" height="1000"></canvas>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

Scalable Vector Graphics (SVG)
A <SVG> element:
  • is based on vector-based family of graphics.
  • defines graphics in XML Format.
  • creates graphics that does not lose any quality when zoomed or resized
The following is a sample of drawing a rectangle using an <SVG> Element:
    <title>SVG Testing</title>
        <svg height="500" width="500">
            <rect x="50" y="100" height="100" width="200" fill="red" stroke="black" stroke-width="2"/>