Initializing & Options


To change the height of the drawing, set a CSS height rule on the element passed to LC.init() or the React component that contains Literally Canvas.

Initializing normally

var lc = LC.init(element, {option: value})
LC.init(element, options={})



Function to be called just after the LiterallyCanvas object is configured and bound to an element. Used to do additional configuration in situations where you don’t immediately get this object, e.g. when using the React component or the jQuery plugin.

Example using React:

<LiterallyCanvas onInit={function(lc) {
  console.log("initialized with", lc);
})} />

Location of Literally Canvas’s img folder, without a trailing slash. Defaults to lib/img.


You probably need to set this, either by passing it as an option, or by calling LC.setDefaultImageURLPrefix().


An object with keys width and height. If either value is falsey, that dimension will be infinite. For example:

// 500 pixels wide, infinitely tall canvas
LC.init(element, {imageSize: {width: 500, height: null}})

Starting stroke color. Defaults to '#000'.


Starting fill color. Defaults to '#fff'.


Starting background color. Defaults to 'transparent'.


List of shapes to display under all other shapes. They will not be affected by the Clear button, loadSnapshot(), or the eraser tool.


Snapshot to load immediately. If the snapshot contains values for image size, colors, or background shapes, the values in the snapshot will override the values passed as options.

Snapshots are created with getSnapshot() and loaded after initialization with loadSnapshot().


Enable panning with the arrow keys. Defaults to true.

Deprecated since version 0.4.9.

You can replicate this option with a tiny bit of code:

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 37) lc.pan(-10, 0);
  if (e.keyCode == 38) lc.pan(0, -10);
  if (e.keyCode == 39) lc.pan(10, 0);
  if (e.keyCode == 40) lc.pan(0, 10);
  if (e.keyCode >= 37 && e.keyCode <= 40) {
    e.preventDefault(); // prevents keyboard page scrolling!


  • 'bottom' (default)

  • 'top'

  • 'hidden'


A list of tools to enable. The default value, accessible at LC.defaultTools, is:


If you write your own tool, you can append it to the list above and pass the whole list as the value of tools.

If you need to disable a tool (such as pan), you can remove it from the list above and pass the remainder as the value of tools.

LC.init(element, {
    // disable panning
    keyboardShortcuts: false,
    tools: [,,,,,]

A list of possible stroke widths. Defaults to [1, 2, 5, 10, 20, 30].


Default stroke width for all shapes. Defaults to 5.


An image to display behind the drawing. The image will be centered. It will not pan with the drawing.

var img = new Image()
img.src = '/static/img/watermark.png'
$('.literally').literallycanvas({watermarkImage: img});

Scale at which to render the watermark.

If you want to support retina displays, you should use a double-size watermark image and set watermarkScale to 1/window.devicePixelRatio.


Maximum zoom value. Defaults to 4.0.


Minimum zoom value. Defaults to 0.2.


Amount by which the zoom in/out buttons change the zoom level. Defaults to 0.2.

Breaking changes since v0.3

  • backgroundShapes and watermarkImage are no longer affected by the eraser.

  • The preserveCanvasContents option is gone. If you want to use the contents of an existing canvas element as the background of a drawing, do this:

    backgroundImage = new Image();
    backgroundImage.src = $('').get(0).toDataURL();
    backgroundShape = LC.createShape(
      'Image', {x: 0, y: 0, image: backgroundImage}));
    $('.literally').literallycanvas({backgroundShapes: [backgroundShape]});
  • Tools are defined by the new tools option, which replaces the old toolClasses and takes a different list of arguments.