html5canvasiris early

refactoring, as backup

by rob Davis

HTML

<body>
    <div>
        <canvas id="canvasId" width="500" height="500"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }

JavaScript

doDraw();

function convertToRadians(degree) {
    return degree*(Math.PI/180);
}

// ellipse method from http://stackoverflow.com/a/8372834/799759
// modified to have a callback fill/gradient
function drawEllipse(context, cx, cy, rx, ry, fill){
    context.save(); // save state
    context.beginPath();
    context.translate(cx-rx, cy-ry);
    context.scale(rx, ry);
	var ellipseFill;
	if (typeof(fill)==='function') {
		ellipseFill=fill(context);
	} else {
		ellipseFill=fill;
	}

    context.arc(1, 1, 1, 0, 2 * Math.PI, false);
    context.fillStyle = ellipseFill;
    context.fill();
	context.closePath();
    context.restore(); // restore to original state
}

function doDraw() 
{
	var context;
	context = document.getElementById('canvasId').getContext("2d");

	var irisWidth=250;
	var numberOfLines =400;
	var eyeColour = 'rgb(56,101,169)';

	drawIris(context,irisWidth,eyeColour,numberOfLines);
}

function drawIris(context,width,eyeColour,numberOfLines)
{
	radius = width/2;
	pupilRadius = width/6;
	
	drawEyeIrisBackground(context,eyeColour, radius);
	drawEyeIrisForeground(numberOfLines,context,pupilRadius,radius,eyeColour);

	drawPupil(context,radius,pupilRadius);
	drawHighlights(context,width);
}

function drawHighlights(context,width)
{
	// top highlight
	var centerX=width*.3;
	var centerY=width*.35;
	var hlWidth=width*.32;
	var hlHeight=width*.2;

	var topHighlight=function(context) {
			gradient = context.createRadialGradient(1,1,0,1,1,1); // correct coords once in the drawEllipse method
			gradient.addColorStop(0.5, 'rgba(200,200,200,0.4)');
			gradient.addColorStop(1.0, 'rgba(0,0,0,0.0)');
			return gradient;
		};
	drawEllipse(context, centerX, centerY,hlWidth,hlHeight ,topHighlight)	

	// bottom highlight
	var centerX=width*.8;
	var centerY=width*.8;
	var hlWidth=width*.08;
	var hlHeight=width*.04;

	var bottomHighlight=function(context) {
			gradient = context.createRadialGradient(1,1,0,1,1,1); // correct coords once in the drawEllipse...