Canvas - arc

by M J Khan

HTML

<canvas id="canvasSurface" width="500" height="200">
				Your browser does not support HTML5.
			</canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

(function() {
  var drawingSurface = getCanvasElement();
  var ctxt = getContext(drawingSurface);
  ctxt.beginPath(); //beginPath Resets/begins a new drawing path			
  ctxt.lineWidth = 10; // lineWidth --> Property to change the thickness. 
  ctxt.lineCap = 'round';

  //arc --> A standard arc based on a starting and ending angle and a defined radius
  ctxt.arc(150, 100, 75, 0, 2 * Math.PI, false); //X, Y, radius, startAngle, endAngle, counterclockwise
  ctxt.lineWidth = 25;
  ctxt.strokeStyle = 'blue';
  ctxt.stroke();

  ctxt.stroke(); //stroke --> Strokes the line, which makes the line visible
  function getCanvasElement() {
    return document.getElementById("canvasSurface");
  };
  function getContext(drawingSurface) {
    /* 
    The context is an object that provides the API methods you use to draw on the canvas. 
    Now, <canvas> supports only a 2d context    
    */
    return drawingSurface.getContext("2d");
  };

})();