<!doctype html>
<html>
  <head>
    <title>Literally Canvas</title>
    <link href="/lib/css/colorpicker.css" rel="stylesheet">
    <link href="/lib/css/literally.css" rel="stylesheet">

    <style type="text/css">
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
      }

      .fs-container {
        width: 768px;
        height: 300px;
        margin: auto;
        margin-top: 50px;
      }

      .literally {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="fs-container">
      <div class="literally"><canvas></canvas></div>
    </div>

    <script src="/demo/jquery-1.8.2.js"></script>
    <script src="/demo/underscore-1.4.2.js"></script>
    <script src="/lib/js/literallycanvas.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        // disable scrolling on touch devices so we can actually draw
        $(document).bind('touchmove', function(e) {
          if (e.target === document.documentElement) {
            return e.preventDefault();
          }
        });

        // the only LC-specific thing we have to do
        $('.literally').literallycanvas({imageURLPrefix: '/lib/img'});
      });
    </script>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <title>Literally Canvas</title>
    <link href="/lib/css/colorpicker.css" rel="stylesheet">
    <link href="/lib/css/literally.css" rel="stylesheet">

    <style type="text/css">
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
      }

      .fs-container {
        width: 768px;
        height: 500px;
        margin: auto;
        margin-top: 50px;
      }

      .literally {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="fs-container">
      <div class="literally"><canvas></canvas></div>
    </div>

    <script src="/demo/jquery-1.8.2.js"></script>
    <script src="/demo/underscore-1.4.2.js"></script>
    <script src="/lib/js/literallycanvas.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        // disable scrolling on touch devices so we can actually draw
        $(document).bind('touchmove', function(e) {
          if (e.target === document.documentElement) {
            return e.preventDefault();
          }
        });

        // the only LC-specific thing we have to do
        $('.literally').literallycanvas({imageURLPrefix: '/lib/img'});
      });
    </script>
  </body>
</html>

Make demo wider just 'cause
Make demo wider just 'cause
