index.html

<!-- Barak Stout -->

<html>
    <head>
		<title>A Utility for Canvas Drawing in JS</title>
    </head>
    <body>
		<canvas id="canvas" width="400px" height="400px" onclick="consolePrintMouseXY(event)"></canvas>
    </body>
	
	<script type="text/javascript" language="javascript" src="canvasDrawJS.js"></script>
    <script type="text/javascript" language="javascript">
		
		// size, canvas and context are global variables
		
		// Un-comment the next line to use a diffent canvas name
		// var canvasID = "canvas"; 
		
		// Un-comment the next line to override the size of the grid
		// var size = 100; 
		
		// Un-comment the next line to override the color of the grid
		// var gridColor = "red"; 
		
		// Un-comment the next line to have the grid displayed
		 drawGrid();
		
		// Write you code that you want drawn here
		function draw() 
		{
		
			// using arc: arc(x,y,r,sAngle,eAngle,counterclockwise);
			context.beginPath();
			
			context.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
			context.moveTo(110, 75);
			context.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
			context.moveTo(65, 65);
			context.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
			context.moveTo(95, 65);
			context.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
			
			context.stroke();
		}
		
		// call the draw function
		draw();
	</script>
</html>