Animation Viewer

A simple animation preview device for creating art in my game engine.

HTML

<canvas id="backCanvas" width="400" height="400"></canvas>
<canvas id="myCanvas" width="600" height="400"></canvas>
<iframe name='result' frameBorder='0' src="http://fiddle.jshell.net/SteamyShiner/zVfq8/show/" width="602" height="165" id="clipboard"></iframe><br/>
<form name="Controls" id="buttons">
    <input type="button" name="startBut" onclick="setup()" value="Launch" />
</form>

<!--    
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> MouseX<br>
<input type="text" name="MouseY" value="0" size="4"> MouseY<br>
</form>
-->

<script language="JavaScript1.2">

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s
    
function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
    //document.Show.MouseX.value = tempX
    //document.Show.MouseY.value = tempY
  return true
}
</script>

CSS

#myCanvas {
    position:absolute;
    top:1px;
    left:1px;
    border:solid;
    border-width:1px;
    border-color:red;
}

#buttons {
    position:absolute;
    top:400px;
    left:1px;
}

#clipboard {
    position:absolute;
    top:400px;
    left:1px;
}

#output {
    position:relative;
    top:-405px;
}

#backCanvas {
    position:absolute;
    top:1px;
    left:1px;
    border:solid;
    border-width:1px;
    border-color:red;
}

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var r = 7;
var g = 10;
var b = 15;
var a = 0;
var started = false;
var playing = false;

function setup() {
    disableSelection(document.body);
    if (started) {
        drawgrid();
        return;
    }
    started = true;

    var canvas = document.getElementById("myCanvas"); //Initialize canvas
    var context = canvas.getContext("2d");
    document.Controls.innerHTML = "";
    document.getElementById('clipboard').contentWindow.start();

    document.onmousedown = function(e) { //Recieving mouse input
        if (tempX == 0 || tempY == 0 || tempY > 500 || tempX > 600) {
            return;
        }
        mouseDown = 1;
        mouseIsDown(e);
    }

    document.onmouseup = function() { //Recieveing mouse input
        mouseDown = 0;
    }

    document.onmousemove = moved; //Recieving mouse input
    
    swatcher(); //Load display
}

function swatcher() { //Colour selection\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    context.clearRect(400,0,200,400);
    
    context.strokeRect(410, 340, 50, 50);
    
    if (!playing) {
        context.beginPath();
        context.moveTo(420,350);
        context.lineTo(420,380);
        context.lineTo(450,365);
        context.lineTo(420,350);
        context.closePath();
        context.fill();
    } else {
        context.fillRect(420, 350, 30, 30);
        play();
    }
    
    rgbSliders();
    
    drawgrid();
}

function play() {
    load(1);
}

function rgbSliders() {

    for (z = 0; z < 40; z++) { //Red Display Loop
        context.fillStyle = "rgb(" + z * 7 + "," + g * 7 + "," + b * 7 + ")";
        context.fillRect(400 + z * 5, 5, 5, 15);
    }
    context.strokeStyle = "red";
    context.strokeRect(400 + r * 5, 4, 5, 17); //R Indicator
    for (z = 0; z < 40; z++) { //Green Display Loop
        context.fillStyle = "rgb(" + r * 7 + "," + z * 7 + "," + b * 7 + ")";
        context.fillRect(400 + z * 5, 25, 5, 15);
   ...