Literally Canvas

Note

Looking for a multiuser whiteboard, or want some help building a drawing-based web app? Check out Browserboard.

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like with the results. comes with an easy-to-use jQuery plugin.

Warning

Literally Canvas is not maintained. It uses outdated build tools and hasn’t been improved much in years. Many people still find it useful, but if you adopt it, expect to write your own bug fixes.

Literally Canvas’s major features include:

• Basic drawing tools

• An API to add more drawing tools

• Panning and zooming

• Constant-size or infinite canvases

• Background images/shapes and watermarks

• Retina support

• Saving and loading JSON

• Exporting drawings to PNG and SVG

• Events

You can donate to Literally Canvas’s development on Gratipay or post a bounty on a GitHub issue on Bountysource. Spontaneous improvements are rare otherwise, though they do happen.

Note

Our mailing list was down for several months. You’ll need to re-subscribe using one of the methods in the sidebar.

• Installing
  • Get the code and the assets
  • Include the assets and write the code
    • Classic Style
    • React.js Style
  • Skipping the GUI and the React dependency
• API
  • Initializing & Options
    • Initializing normally
    • Breaking changes since v0.3
  • The LiterallyCanvas object
    • Saving and loading
    • Exporting images
    • Event subscription
    • Controlling the view
    • Changing the drawing
    • Getting information
    • Teardown
  • Rendering snapshots
  • Events
    • Definition format
    • Drawing changes
    • Tool state
    • View changes
    • Pointer
  • Shapes
    • Creating shapes
    • Shapes and JSON
    • Rendering shapes outside of an interactive session
    • Defining shapes
    • Adding shapes to drawings programmatically
  • Creating Tools
    • Simple API
    • Normal API
    • Options styles
  • Utilities
  • Localization
  • Uncategorized functions
  • Summary
• Examples
  • Images
    • As the background
    • As the watermark
    • As part of the drawing
  • Saving to Local Storage
  • Exporting images
    • Exporting the bounding rect of all shapes
    • Exporting a specific rectangle
    • Exporting to SVG
  • Uploading to Imgur
  • Using the Core Build

Why?

• It’s open source. It’s developed by the community for many purposes and is free to use and extend.

• 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 wants to be extended. There is a public API for adding new shapes and tools.

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

Browser compatibility

Chrome	√
Safari	√
iOS	√	FastClick helps 1
Firefox 4+	√
IE 10+	√	Line dashes only supported in 11+
Opera	??
Android	??

Footnotes

1

iOS delays click events so that it can detect gestures. To disable this behavior and get those events immediately, use FastClick.

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, the solution to your problem might be to help us write the code.

Thanks to BrowserStack

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.