CreativeJS :: Painting w/ Pixels

by schrodingers

HTML

<canvas id="drawingPad" width="200" height="200"></canvas>
<ul id="palette">
    <li class="active" style="background:#000000"></li>
    <li style="background:#ff0000"></li>
    <li style="background:#00ff00"></li>
    <li style="background:#0000ff"></li>
    <li style="background:#ffff00"></li>
    <li style="background:#ff00ff"></li>
    <li style="background:#00ffff"></li>
</ul>

<a href="#" id="clear">Clear</a>
<a href="#" id="save" download="drawing.png" target="_blank">Save</a>

CSS

canvas {
    border:5px solid black;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    border:0;
    height:30px;
}
li {
    margin:0;
    padding:0;
    border:2px solid white;
    display:block;
    float:left;
    width:30px;
    height:30px;
    cursor:pointer;
}
li.active {
    border:2px solid #666;
}
a, a:hover {
    margin-top:10px;
    font-family:Arial, sans-serif;
    display:block;
    width:220px;
    padding:5px 10px;
    background:#3d6aa2;
    color:white;
    text-decoration:none;
    font-size:2em;
    text-align:center;
}

JavaScript

var canvas = document.getElementById("drawingPad");
var context = canvas.getContext("2d");
var isMouseDown = false;
var mouseX = 0;
var mouseY = 0;

context.strokeStyle = "#000000"; // drawing black lines.

// make sure the canvas' background is actually white for saving.
context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width,canvas.height);

// when the user presses their mouse down on the canvas.
canvas.addEventListener("mousedown",function (evt) {
    isMouseDown = true;

    mouseX = evt.offsetX;
    mouseY = evt.offsetY;

    context.beginPath();
    context.moveTo(mouseX, mouseY);
});

// when the user lifts their mouse up anywhere on the screen.
window.addEventListener("mouseup",function (evt) {
    isMouseDown = false;
});

// as the user moves the mouse around.
canvas.addEventListener("mousemove",function (evt) {
    if (isMouseDown) {
        mouseX = evt.offsetX;
        mouseY = evt.offsetY;

        context.lineTo(mouseX, mouseY);
        context.stroke();
    }
});

// swatch interactivity
var palette = document.getElementById("palette");
var swatches = palette.children;
var currentSwatch; // we'll keep track of what swatch is active in this.

for (var i = 0; i < swatches.length; i++) {
    var swatch = swatches[i];
    if (i == 0) {
        currentSwatch = swatch;
    }

    // when we click on a swatch...
    swatch.addEventListener("click",function (evt) {

        this.className = "active"; // give the swatch a class of "active", which will trigger the CSS border.
        currentSwatch.className = ""; // remove the "active" class from the previously selected swatch
        currentSwatch = this; // set this to the current swatch so next time we'll take "active" off of this.

        context.strokeStyle = this.style.backgroundColor; // set the background color for the canvas.
    });
}

// when the clear button is clicked
var clearBtn = document.getElementById("clear");
clearBtn.addEventListener("click",function(evt) {
    canvas.width =...