Canvas in HTML

Before canvas was introduced in HTML5 version, we used to use SVG to draw graphical shapes in html.

SVG

SVG stands for scalable vector graphics and it is a xml based vector image format.

  <svg height="200" width="200">
  <circle cx="100" cy="100" r="30" stroke="white" strokeWidth="2" fill="navy" />
  </svg>

Canvas

Canvas is based on raster. It supports 2 APIs.

• 2D drawing api - this is built in api in Canvas
• 3D rendering api - WebGL api using OpenGLES

 <canvas  id="circleCanvas" width="200px" height="200px"/> 

 <script>
 var canvasContainer = document.getElementById("circleCanvas");
 var context = canvasContainer.getContext("2d");
 context.beginPath();
 {/* arc function parameters - x,y,radius,startangle, endangle */}
 context.arc(100, 100, 50, 0, 2 * Math.PI);
 context.stroke(); 
 </script>