Testing Paint Program

My simple canvas paint program.

by Will Stott

HTML

<div id="canvasHolder">
    <img id="img" src="http://7.mshcdn.com/wp-content/uploads/2011/01/html5-logo-1.jpg">
</div>
<form name="Controls" id="buttons">
    <input type="button" name="startBut" onclick="setup()" value="Launch" />
    <input type="button" onclick="convert()" value="Show PNG" />
    <input type="button" onclick="setbg()" value="Set Background" /><br>
</form>
<img id="img" src="">
<!--    
<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 {
    cursor:crosshair;
}
#myCanvas:active {
    cursor:crosshair;
}
#myCanvas:link {
    cursor:crosshair;
}
#myCanvas:visited {
    cursor:crosshair;
}
#colourCanvas {
    cursor:crosshair;
}
#colourCanvas:active {
    cursor:crosshair;
}
#colourCanvas:link {
    cursor:crosshair;
}
#colourCanvas:visited {
    cursor:crosshair;
}

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

JavaScript

var r = 50;
var g = 50;
var b = 50;
var a = 0;

var lastY = 0;
var lastX = 0;
var currentY = 0;
var currentX = 0;

var linWidth = 5;

var started = false;

function setup() {
    if (started) {
        cleardisp();
        return;
    }
    var canvasHTML = '<canvas id="myCanvas" width="400" height="400"></canvas><canvas id="colourCanvas" width="200" height="400"></canvas>';
    
    document.getElementById("canvasHolder").innerHTML = canvasHTML;
    
    started = true;
    
    document.Controls.startBut.value = "Clear Canvas";
    
    document.onmousedown = function(e) { //Recieving mouse input
        if (tempY > 0 && tempX > 0 && tempY < 400 && tempX < 600) {
        mouseDown = 1;
        mouseIsDown(e);
        }
    }
        
    document.onmouseup = function() { //Recieveing mouse input
        mouseDown = 0;
    }

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

function getContext () {
    return document.getElementById("colourCanvas").getContext("2d");
}

function swatcher() { //Colour selection\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    
    var context = getContext ();//Initialize canvas
    context.strokeStyle = "black";
    context.lineWidth = 1;
    
    context.clearRect(0, 0, 200, 400); //Cleaning display area
    
    //Drawing 2 Axis Colour Picker
    for (x = 0; x < 40; x++) { //Red RGB Loop
        for (y = 0; y < 40; y++) { //Green RGB Loop
            context.fillStyle = "rgb(" + x * 2.5 + "%," + y * 2.5 + "%," + b + "%)";
            //context.fillStyle = "hsl(" + (x * 2.5)*3.5 + "," + y * 2.5 + "%," + y * 2.5 + "%)";
            //Setting fill style with RGB
            context.fillRect(x * 5, y * 5, 5, 5); //Drawing colour cube
        }
    }
    for (z = 0; z < 20; z++) { //Blue Modifier Loop
        context.fillStyle = "rgb(100%,100%," + z * 5 + "%)";
        context.fillRect(z * 8, 205, 10, 15);
    }
    //Finished 2 Axis Colour Picker
    
    //Drawing other controls
   ...