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:
- Sketch.js is coded in Coffeescript. I had used Coffeescript before but never its class system or more advanced features. I like it!
- 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.
- 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.
- 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!
