// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");
		// arc(x,y,radius,startAngle,endAgnle,anticlockwise)
		//x: x coordinate of the center of the circle
		//y: y coordinate of the center of the circle
		//radius: radius of the circle
		//startAngle: position on the circle in radians of the start point
		//endAngle: position on the circle in radians of the end poiint
		//anticlockwise: drawn in clockwise or anticlockwise direction
	
		//a2. circles
		//	x	y 		radius	line	fill
		//

		drawCircle(60,15,40,"aqua","yellow");
		drawCircle(150,70,60,"green","white");
		drawCircle(250,15,50,"red","pink");
		drawCircle(360,60,50,"blue","purple");

		//b draw circle function
		function drawCircle(xPos, yPos, radius, lineColor, fillColor)
		{
			// b1 angles in radians
			var startAngle = 0 * (Math.PI/180);
			var endAngle = 360 * (Math.PI/180);

			//b2 radius
			var radius = radius;

			// b3 attributes
			context.strokeStyle = lineColor;
			context.fillStyle = fillColor;
			context.lineWidth = 8;

			//b4 shape
			context.beginPath();
			context.arc(xPos,yPos,radius,startAngle,endAngle,false);
			context.fill();
			context.stroke();
			
		}
	}