html5canvaseyeball backup

backup of non animated eye

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

// Todo:
// Add real time tracking
// Add "squishing", matrix or better

doDraw();

function doDraw() 
{
	var context;
	context = document.getElementById('canvasId').getContext("2d");
    var eyeballWidth=500; // refactor to diameter
    var irisWidth = eyeballWidth/2;
	var numberOfLines =400;
	var eyeColour = 'rgb(56,101,169)';
    
    context.save(); // does not help
	drawEyeBall(context,eyeballWidth);
    context.restore(); // does not help
    
    context.save();
    var width = eyeballWidth;
    var height = eyeballWidth;
    context.translate(width/2,height/2);
    /* Puts a blue rectangle in the center of the rotation, for reference */
    context.fillStyle='#00f';
    context.fillRect(0,0,4,4);
    
    for (var a=0;a<360;a+=15) {
        genArm(context, 0,height/2, height / 8, 90, 0.24, 0, 5, '#faa');
        context.rotate(convertDegreesToRadians(a));
        //genArm(context, 0,height/2, height / 8, 90, 0.24, 0, 5, '#0f0');
    }
    context.restore();
    
    var offset = (eyeballWidth-irisWidth)/2;
    context.translate(offset, offset);
	drawIris(context,irisWidth,eyeColour,numberOfLines);
    drawHighlights(context,eyeballWidth);
}

function drawEyeBall(context,width)
{
	context.beginPath();
	var radius = width/2; 
	var gradient = context.createRadialGradient(radius,radius,0,radius,radius,radius);
	gradient.addColorStop(0.75, '#fff');
	gradient.addColorStop(0.85, '#fee');
    gradient.addColorStop(1.0, '#edd');
    context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
    context.fillStyle = gradient;
    context.fill();
	context.closePath();

}

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);

}

function drawHighlights(context,width)
{
	// top highlight
	var centerX=width*.15;
	var centerY=width*.175;
	var...