Building a drawing app with HTML5's canvas (Part 5)

In the previous post with out drawing app series I announced that we'll build functionality to pick colours from a palette. So, in this post, we'll try doing it!


View Code View Demo

Building the palette

You might take a different approach doing this, but in my example, it's really simply, all you have to do in your HTML is add the line <div id="palette"></div> to your control div... So the end product should look like:

<div class="toolbar">    
    <div id="rad">
        Radius: 
        <span id="radVal">10</span>
        <div id="radPlus" class="button">+</div>
        <div id="radMinus" class="button">-</div>
    </div>
    <div id="palette"></div>
</div>

You can style it however you want, but in my version of the app I add a class of "swatch" to all the colour buttons and the class "swatch active" to the active one. I wont put the CSS in here because it might be too lengthy, just go out and check the code above.

Programmatically populating our palette with swatches

Here's the theory, we make an array with a list of colours that we want our user to be able to use. We then loop through each of these colours and create a "swatch" div element for the swatch, we then add the click event handler that responds when the swatch is clicked (it'll actually apply the colour to the canvas).

So, here's what it should look like:

// Somewhere in the beginning
var colors = ['black', 'gray', 'white', 'violet', 'indigo', 'blue',
              'green', 'yellow', 'orange', 'red'];

... // all of our other code


// Somewhere in the ending
for(var i=0; i<colors.length; i++){
  var swatch = document.createElement("div"); // Create a div for our swatch
  swatch.className="swatch"; // Add the class swatch to it so that our styles apply
  swatch.style.backgroundColor=colors[i]; // Change the background colour accordingly
  swatch.addEventListener("click", setSwatch); // Set the click event listener 
  document.getElementById("palette").appendChild(swatch); // add it to our palette
}

Responding to swatch element clicks

Since all the swatch elements get the same function setSwatch as their event handler, our first task is to find which of the swatches was clicked. This is fairly simple using the e.target property. The next thing we'll do is  actually change the colour of the canvas's pen, for this we'll actually build another function called setColor, so we'll just call the setColor function and pass the background colour of the target element to it.

We then make the current swatch element active by adding the className active to it.

So, here's what our event handler looks like:

var setSwatch = function(e){
    var swatch = e.target;
    setColor(swatch.style.backgroundColor);
    swatch.className+=" active";
}

Actually changing the colour

This function is really simple to build, we just have two jobs to do:

• Change the fillStyle and strokeStyle of the canvas element.
• Remove the className "active" from the currently active element. (because a new element is now active)

So, here's what it looks like:

var setColor = function(color){
    context.fillStyle = color;
    context.strokeStyle = color;
    var active = document.getElementsByClassName("active")[0];
    if (active)
        active.className="swatch";
}

Conclusion

Yea, that's pretty much it for this tutorial, we've just built a little colour palette that allows us to change colours...

Now our colour palette can actually draw in colour!

So, in the next tutorial, we'll build functionality to save the drawings we make to our disk, then we'll probably have a wrap up tutorial and then we'll close this series...