Images

You may want to refer to the shape API for specifics about creating shapes, including images.

As the background

You can specify a list of background shapes when you initialize Literally Canvas. Background shapes are not affected by the eraser, loadSnapshotJSON(), or clearing the canvas.

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

<script>
  $(document).ready(function() {
    var backgroundImage = new Image()
    backgroundImage.src = '/_static/sample_image.png';

    var lc = LC.init(
        document.getElementsByClassName('literally backgrounds')[0],
        {
          backgroundShapes: [
            LC.createShape(
              'Image', {x: 20, y: 20, image: backgroundImage, scale: 2}),
            LC.createShape(
              'Text', {
                x: 200, y: 200, text: "I am in the background",
                font: "bold 12px Helvetica"
              })
          ]
        });
    // the background image is not included in the shape list that is
    // saved/loaded here
    var localStorageKey = 'drawing-with-background'
    if (localStorage.getItem(localStorageKey)) {
      lc.loadSnapshotJSON(localStorage.getItem(localStorageKey));
    }
    lc.on('drawingChange', function() {
      localStorage.setItem(localStorageKey, lc.getSnapshotJSON());
    });
  });
</script>

As the watermark

The watermark image is a special image that is like a background shape, except it doesn’t pan with the drawing and is centered at all times. It allows you to add branding to your drawing widget.

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

<script>
  $(document).ready(function() {
    var watermarkImage = new Image();
    watermarkImage.src = '/_static/watermark.png';
    LC.init(
      document.getElementsByClassName('literally watermark')[0],
      {
        watermarkImage: watermarkImage,
        watermarkScale: 0.5  // you can scale it
      });
  });
</script>

As part of the drawing

Literally Canvas does not yet provide a UI for adding images, but you can add them programmatically.

<div class="literally images-in-drawing"></div>

<script>
  $(document).ready(function() {
    var lc = LC.init(
      document.getElementsByClassName('literally images-in-drawing')[0]);
    var newImage = new Image()
    newImage.src = '/_static/sample_image.png';
    lc.saveShape(LC.createShape('Image', {x: 10, y: 10, image: newImage}));
  });
</script>