html5canvasiris early

non eliptical highlights, 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

var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

	var width=500;
	var numberOfLines =400;

doDraw();

// ellipse method from http://stackoverflow.com/a/8372834/799759
function ellipse(context, cx, cy, rx, ry, colour){
    context.save(); // save state
    context.beginPath();
    context.translate(cx-rx, cy-ry);
    context.scale(rx, ry);
    context.arc(1, 1, 1, 0, 2 * Math.PI, false);
    context.fillStyle = colour;
    context.fill();
	context.closePath();
    context.restore(); // restore to original state
}

function doDraw() 
{
	var context;
	context = document.getElementById('canvasId').getContext("2d");
	radius = width/2;
	pupilRadius = width/6;
	var eyeColour = 'rgb(56,101,169)';
	
	drawEyeIrisBackground(context,eyeColour, radius);


    for (var c = 0; c < numberOfLines; c++) {
        angle = Math.random()*360;
        len = Math.random()*250;
		line(angle,len,context,0,pupilRadius,0,radius,radius,eyeColour);
    }

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

function drawHighlights(context,width)
{

	// top highlight
	var centerX=150;
	var centerY=175;
	var hlWidth=80;
	var hlHeight=50;
	gradient = context.createRadialGradient(centerX, centerY,0,centerX, centerY,50);
	gradient.addColorStop(0.5, 'rgba(200,200,200,0.4)');
	gradient.addColorStop(1.0, 'rgba(0,0,0,0.0)');

	ellipse(context, centerX, centerY,250,250 ,gradient)	
    context.fillStyle = gradient;
    context.fill();	
	// bottom highlight
	var centerX=400;
	var centerY=400;
	var hlWidth=40;
	var hlHeight=30;
	gradient = context.createRadialGradient(centerX, centerY,0,centerX, centerY,30);
	gradient.addColorStop(0.5, 'rgba(200,200,200,0.3)');
	gradient.addColorStop(1.0, 'rgba(0,0,0,0.0)');
	ellipse(context, centerX, centerY, hlWidth, hlHeight ,gradient)	
    context.fillStyle = gradient;
    context.fill();	

}

function drawEyeIrisBackground(context,eyeColour, radius)
{
	context.beginPath();
	gradient...