draw iris with rotation/scale

redraw the iris as mouse is moved

by rob Davis

HTML

<body>
    <div>
        <span class="mouse"></span><span class="other"></span>
        <canvas id="canvasBackground" width="200" height="200"></canvas>
        <canvas id="canvasIris" width="200" height="200"></canvas>
        <canvas id="canvasHighlights" width="200" height="200"></canvas>
        <canvas id="canvasMain" width="200" height="200"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }
#canvasMain { top:200px; left:200px;position: absolute; }
#canvasIris { top:0px; left:0px;position: absolute; }
#canvasBackground { top:50px; left:50px;position: absolute; }
#canvasHighlights { top:50px; left:50px;position: absolute; }

JavaScript

var canvasMain = document.getElementById('canvasMain');
var contextMain = canvasMain.getContext("2d");
var canvasIris = document.getElementById('canvasIris');
var contextIris = canvasIris.getContext("2d");
var canvasBackground = document.getElementById('canvasBackground');
var contextBackground = canvasBackground.getContext("2d");
var canvasHighlights = document.getElementById('canvasHighlights');
var contextHighlights = canvasHighlights.getContext("2d");

var width = canvasMain.width;
var height = canvasMain.height;
var diameter = width/2;
var centerX = diameter;
var centerY = diameter;
var maxDistanceFromCenter=50;
var offsetLocationX = 200;
var offsetLocationY = 200;

// Todo:
// Add real time tracking - currently not taking into account offset from page 0,0
// Add "squishing", matrix or better
// Rename math functions
// buddle code into reusable object for multiple instances
// halloween eyes
// changable iris colour
// larger base to draw veins that is cropped and then moved with iris
// save the initially drawn 'eye' and reuse it when iris moves

// Draw the iris to a separate canvas
doDrawSerarateIris(canvasMain.width);
// Draw eyeball background to a separate canvas
doBackground(contextBackground, canvasBackground);
// highlight canvas
doDrawHighlights(contextHighlights, width)

// trap mouse movements and cause updates
$(window).mousemove(function (event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    // not sure why I need this -20, but it works
    $('.mouse').html(pageCoords + ' ' + clientCoords + '['+centerX+', '+centerY+']');
    doDraw(contextMain,canvasMain, event.pageX, event.pageY, centerX, centerY);
});

// composites canvases
function doDraw(context,canvas, mX, mY, cX, cY) {
    context.drawImage(canvasBackground, 0, 0);
    var eyeBallDiameter=canvas.width; // refactor to diameter
    var irisWidth = eyeBallDiameter/2;
    var offset =...