Literally “Canvas”

Fullscreen demo >>
Fork me on Github >>
Download v0.2
The lib/ folder contains the images, CSS, and Javascript. The “fat” versions include jQuery 1.8.2 and Underscore.js. The “thin” versions do not.

About

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.

The instance at the top of this page uses the resizable feature of jQuery UI for its resize feature, to demonstrate that you can resize the container element with impunity. Resizing on the right edge of the canvas causes weirdness, but you get the idea.

Why?

If you look at Related Projects at the bottom of the page, you can see that this isn't the only HTML5 drawing tool on the block. However, it is unique in several ways:

  • It's open source. Other drawing tools seem to be almost exclusively provided by businesses whose core feature is their drawing tool or freelancers who want you to pay them to adapt their work to your use case. We have nothing against those people, but it's important that free alternatives exist.
  • It's a widget, not an application. Literally Canvas is intended to live inside your application in the way that works best for you. It doesn't take over your screen. It doesn't (intentionally) gobble up events. It tries to keep its UI to a minimum.
  • It wants to be extended. We've tried to design it with extensibility in mind. There's no formal tool API, but if you have specific needs, we think it's easy enough to read the source and figure out how to add what you want. We hope to improve and expose the tool API in future releases.

Literally Canvas was created in part to replace the object drawing tool in Buildy. We hope you're inspired to use it to make new things of your own!

Usage

<div class="literally"><canvas></canvas></div>

$('.literally').literallycanvas();

$('.literally').literallycanvas({
  backgroundColor: 'rgb(255, 0, 0)', // default rgb(230, 230, 230)
  keyboardShortcuts: false,          // default true
  sizeToContainer: false,            // default true
  toolClasses: [LC.Pencil]           // see coffee/tools.coffee
});

Supported Browsers

Browser Support
ChromeAwesome (this is where we test)
SafariAwesome
iOSAwesome
Firefox Requires a shim for <input type="range"> which we don't provide. Falls back to a normal input field, which works but isn't as nice.
Opera???
Android???
IE 10???
IE 9Nope

“API”

It's in quotes for a reason.

$('.literally').literallycanvas(options)

backgroundColor
CSS color value of the initial background. Default rgb(230, 230, 230).
imageURLPrefix
URL you're serving the contents of lib/img from. Default lib/img.
keyboardShortcuts
If true, bind keyboard shortcuts. Currently only implements panning with the arrow keys. Default true.
sizeToContainer
If true, resize the <canvas> element to fit the height of its containing <div class="literally"> element. The alternative is false, which will not resize the <canvas> element at all. Default true.
toolClasses
List of tool classes to use. Unless you're writing your own tool, you probably don't need to change this setting. Includes all tools by default.

$('.literally').canvasForExport()

Canvas object containing the user's complete drawing. (Currently just the visible canvas area, will probably change to include all paths.)

The Future

  • A better, smaller color picker
  • Brush API
  • Nicer-looking brushes
  • Interactive tools (text, shapes)
Suggest a feature on Github

Contributing

We would be excited to see contributions of any form. New brushes, optimizations, feature requests, use cases, designs, bug reports – you name it, we want it! Just head on over to github.com/literallycanvas/literallycanvas and get started.

One particular area where we'd like some help is in styling the toolbar. If glitzy CSS-based UI is your thing, we'd love to hear your suggestions or merge your pull requests.

Related Projects

The web has only recently arrived at the point where this sort of project is feasible to implement without Flash, but there are several other projects with similar features. If Literally Canvas isn't quite what you're looking for, we encourage you to check them out and give them some love. All of them use Canvas unless otherwise specified.