// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");

		//a2. arcs
		//	x	Yourradius	startAngle	endAngle	antiC	line	fill
		//
		drawArc(60, 15,40,0,180, false, "aqua", "yellow");
		drawArc(150,70,60,0,100,true,"green","white");
		drawArc(250, 15,50, 350, 170, false,"red", "pink");
		drawArc(360,60,50,350,20,true,"blue","purple");

		//B. draw arc function
		function drawArc(xPos, yPos, radius, startAngle, endAngle, anticlockwise, lineColor, fillColor)
		{
			//b1 angles in radians
			var startAngle = startAngle * (Math.PI/180);
			var endAngle = endAngle * (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, anticlockwise);
			context.fill();
			context.stroke();
		}
	
	}