Canvas in HTML

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


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" />


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"/> 

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

Web development and Automation testing

solutions delivered!!