HTML 5 Provides two graphic Components:

  • CANVAS
  • SVG

HTML 5 Canvas :

  1. Canvas is used to draw graphics on web.
  2. It is basically the container of the graphicsF

Example :

  1. <canvas id=“mycan”width=”200″ height=”100″></canvas>
  2. var c = document.getElementById(“mycan”);
  3. var ctx = c.getContext(“2d”);
  4. ctx.moveTo(0, 0);
  5. ctx.lineTo(200, 100);
  6. ctx.stroke();

SVG :

  • Scalable Vector Graphics
  • The HTML <svg>element is a container for SVG graphics.
  • <svgwidth=”100″ height=”100″>
    <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
    </svg>
  • <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
    style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />

120total visits,1visits today