html5canvasiris early

basic no 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();

function doDraw() 
{
	var context;
	context = document.getElementById('canvasId').getContext("2d");
	radius = width/2;
	pupilRadius = width/6;
	var eyeColour = 'rgb(56,101,169)';
	context.beginPath();
	gradient = context.createRadialGradient(radius,radius,0,radius,radius,radius);
	gradient.addColorStop(0.3, eyeColour);
	gradient.addColorStop(1.0, '#000');
    context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
    context.fillStyle = gradient;
    context.fill();
	context.closePath();


    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);
    }
	context.beginPath();
    context.arc(radius, radius, pupilRadius, 0, 2 * Math.PI, false);
    context.fillStyle = '#000';
    context.fill();
	context.closePath();
}


function line(angle,len,context,lineX1,lineY1,lineX2,lineY2,radius,colour) {
	context.save();                
	context.beginPath();
	endy=len;
	context.translate(radius,radius);
	context.rotate(convertToRadians(angle));
	gradient = context.createLinearGradient(lineX1,lineY1,lineX2,lineY2);
	gradient.addColorStop(0, colour);
	gradient.addColorStop(1, 'rgba(100,100,100,0)');
	context.strokeStyle=gradient;
	context.moveTo(lineX1,lineY1); // this is FROM the translated point
	context.lineWidth = 1;
	context.lineJoin = "round";	
	context.lineTo(lineX2,lineY2);
	context.stroke();
	context.closePath();
	context.restore();
}