canvas copy pixels

copied from the eyeball main branch. Attempts to draw the iris onto a separate canvas and then copy that data back with new rotation and scale

by rob Davis

HTML

<body>
    <div>
        <span class="mouse"></span><span class="other"></span>
        <canvas id="canvasMain" width="200" height="200"></canvas>
        <canvas id="canvasIris" 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; }

JavaScript

var canvas = document.getElementById('canvasMain');
var context = canvas.getContext("2d");
var canvasIris = document.getElementById('canvasIris');
var contextIris = canvasIris.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var centerX = width/2;
var centerY = height/2;
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
// savet eh initially draw 'eye' and reuse it when iris moves

// Draw the iris to a separate canvas and save the generated pixel data
doDrawSerarateIris();
// use hte pixel data to draw the Irirs
doDraw();


// 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+']');
    // ============== update(event.pageX, event.pageY-20, centerX, centerY);
});

// cannot just keep calling this as it redraws the whole eye
function doDraw(mouseX, mouseY, centerX, centerY) 
{
    var eyeBallDiameter=canvas.width; // refactor to diameter
    var irisWidth = eyeBallDiameter/2;
	var numberOfLines =400;
	var eyeColour = 'rgb(56,101,169)';

	drawEyeBallBase(context,eyeBallDiameter);
    drawVeins(eyeBallDiameter);

    context.save();    
    var offset = (eyeBallDiameter-irisWidth)/2;
    context.translate(offset, offset);
	// draw from scratch drawIris(context,irisWidth,eyeColour,numberOfLines);
    // copy from pixel data
    var canvasIris = document.getElementById('canvasIris');
   ...