Sketch.js: HTML5 Canvas Sketchpads for Whyday
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:
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.
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!