Sprite Editor

My simple canvas display sprite editor.

by Will Stott

HTML

<canvas id="backCanvas" width="400" height="400"></canvas>
<canvas id="myCanvas" width="600" height="400"></canvas>
<form name="Controls" id="buttons">
<!--<input type="text" name="ioBox" value="255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 255 0 0 0 255 255 255 255 255 255 255 255 255 0 0 0 255 0 0 0 255 255 255 255 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 210 210 210 255 0 0 0 255 0 0 0 255 0 0 0 255 255 255 255 255 255 255 255 255 0 0 0 255 0 0 0 255 0 0 0 255 210 210 210 255 0 0 0 255 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 255 255 255 255 255 255 210 210 210 255 0 0 0 255 0 0 0 255 255 255 255 255 210 210 210 255 0 0 0 255 0 0 0 255 210 210 210 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 210 210 210 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 210 210 210 255 0 0 0 255 0 0 0 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 0 0 0 255 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 255 255 255 255 255 255 255 210 210 210 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 210 210 210 255 210 210 210 255 210 210 210 255 0 0 0 255 0 0 0 255 210 210...

CSS

#myCanvas {
    position:relative;
    top:-407px;
    border:solid;
    border-width:1px;
}

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

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

#backCanvas {
    position:relative;
    border:solid;
    border-width:1px;
}

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;

function setup() {
    if (started) {
        drawgrid();
        return;
    }
    started = true;

    var canvas = document.getElementById("myCanvas"); //Initialize canvas
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, 400, 400);
    context.strokeRect(415, 225, 80, 80); //Preview Box
    context.clearRect(415, 225, 80, 80); //Thin stroke
    document.Controls.startBut.value = "Display Grid";

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

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

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

function swatcher() { //Colour selection\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    context.clearRect(400, 0, 200, 224); //Cleaning display area
    context.clearRect(498, 224, 135, 82); //Cleaning display area
    context.clearRect(400, 306, 200, 224); //Cleaning display area
    //Drawing 
    for (x = 0; x < 40; x++) { //Red RGB Loop
        for (y = 0; y < 40; y++) { //Green RGB Loop
            context.fillStyle = "rgb(" + x * 7 + "," + y * 7 + "," + b * 7 + ")"; //Setting fill style with RGB
            context.fillRect(400 + x * 5, y * 5, 5, 5); //Drawing colour cube
        }
    }

    for (z = 0; z < 40; z++) { //Blue Modifier Loop
        context.fillStyle = "rgb(255,255," + z * 7 + ")";
        context.fillRect(400 + z * 5, 205, 5, 15);
    }

    context.fillStyle = "rgb(" + r * 7 + "," + g * 7 + "," + b * 7 + ")"; //Current Colour Indicator
    if (a === 0 || a == 2) {
        context.strokeRect(548, 225, 50, 50); //Stroke
        context.fillRect(548, 225, 50, 50); //Display...