About

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. It depends on jQuery.

You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. A semi-stable API allows you to add your own tools. It works great on mobile devices.

It’s easy to get a data URL for upload to a site like Imgur or load/save a user’s drawing.

• Installing
  • Get the assets
  • Include the assets
  • Write code
• API
  • Creating a canvas
  • LiterallyCanvas
  • Events
    • Drawing changes
    • Operations
    • View changes
  • Shapes
  • Adding tools
• Examples
  • Saving to Local Storage
  • Exporting to PNG
  • Uploading to Imgur
  • Adding images
    • With saving and loading
  • Using a watermark

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.
• 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. We hope to improve the tool API in future releases.
• It’s fast and looks good. Literally Canvas is optimized to work with complex drawings, and it smooths lines naturally to avoid the unsightly line angles often seen in simplistic drawing programs.

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!

Browser compatibility

Chrome	Awesome
Safari	Awesome
iOS	Doesn’t work zoomed
Firefox	23+ [1]
Opera	??
Android	??
IE	10+

Footnotes

[1]	Works in previous versions, but the brush size slider will render as a text field.

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 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

• drawingboard.js: Very similar project, slightly different feature set.
• DeviantArt Muro: Sophisticated, comprehensive drawing
• Bomomo: Whimsical doodling
• SketchPad: Simple drawing
• sketchpad.io: Non-destructive, 2.0 version of SketchPad
• Sketch.js: Simplistic, open source version of sketchpad.io
• Sketch: Cartoon-style sketches with gallery
• Zwibbler: Vector graphics
• FigurePool: SVG diagramming
• SVG-edit: Open source SVG non-destructive drawing
• Method Draw: SVG non-destructive drawing, based on SVG-edit
• Creating a Drawing App with HTML5 Canvas and Javascript: Learn a bit about how to do these things yourself!