Last Friday I decided to celebrate _whyday by taking a departure from my normal open source path and writing some Javascript (well, technically Coffeescript). So today we're announcing Sketch.js, a simple jQuery library to enable HTML5 Canvas "sketchpads" for any web application.

Quick and Easy Doodling

Sketch.js allows you to initialize a canvas element as a sketchpad as well as draw with different colors, stroke sizes, and tools (currently only a marker and an eraser). These tools can be accessed programatically or using special links with data attributes. Here's a basic example:

<canvas id='mysketch' width='400' height='300'></canvas>

<script type='text/javascript'>
  $('#mysketch').sketch();
</script>

That's all there is to it! The canvas will now be drawable by your users and, thanks to a relatively straightforward API, you can customize it to your heart's content.

The HTML5 Canvas element is extremely powerful but it can be a bit daunting to get started. I took this as an opportuntiy both to learn it some myself and to provide a drop-in tool for others. Hopefully you find it useful!

Learning on Whyday

I set out on Whyday with the intent of learning a few new tricks. Here's some new things I tried out:

1. Sketch.js is coded in Coffeescript. I had used Coffeescript before but never its class system or more advanced features. I like it!
2. It's documented using Docco which has been one of the most straightforward and pleasant documentation experiences I've ever had. It also, as an annotated source engine, encourages clean source code.
3. I set up an awesome instant build environment that uses Guard to compile Coffeescript, generate docs with Docco, and minify the JS into a build directory. The workflow worked really well.
4. I tried to do a very little bit of unit testing using QUnit, which was my first major foray into Javascript testing. Unfortunately, with how much I was learning about Canvas at the same time, I didn't keep at the testing as much as I would have liked.

All in all it was a great chance to sharpen my skills on something that I hadn't had a ton of experience with. You can see the docs (and live examples) on its GitHub pages or visit the code on GitHub. Enjoy!