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.

If you would like to support Literally Canvas’s development or provide extra incentive to implement your favorite feature request, consider donating at gittip.com/irskep.

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

Browserstack has generously donated resources to ensure that Literally Canvas works in as many environments as possible. If you care about your app’s compatibility, you should check it out.

Chrome Awesome
Safari Awesome
iOS Zoom is buggy
Firefox 23+ [1]
Opera ??
Android ??
IE 10+ (Requires polyfill [2])

Footnotes

[1]Works in previous versions, but the brush size slider will render as a text field.
[2]IE doesn’t support the CustomEvent constructor. Use Mozilla’s polyfill to get Literally Canvas to run in IE.

Contributing

We are 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.

Literally Canvas is developed by volunteers for fun. If missing features or compatibility are serious issues for you, consider that the solution to your problem might be to help us write the code.

Table Of Contents

Download v0.3-rc4

Send a message to
literallycanvas@librelist.com
to join our mailing list.

Help us improve Literally Canvas on Github.