which way i should go

30 views

Skip to first unread message

masudcho...@gmail.com

unread,

Jan 15, 2019, 10:48:20 AM1/15/19

to Literally Canvas

hi all

I have found to use literal canvas in different style such as The classic style has two way one is with GUI and without GUI. Besides there is another option to use core . My question which option i should adopt and which one is better and advantage and disadvantage of each way

regards

masud

Classic Style

Here’s a basic working setup. Each part is required.

<html>
  <head>
    <!-- stylesheet -->
    <link href="/static/css/literallycanvas.css" rel="stylesheet">

    <!-- dependency: React.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

    <!-- Literally Canvas -->
    <script src="/static/js/literallycanvas.js"></script>
  </head>
  <body>
    <!-- where the widget goes. you can do CSS to it. -->
    <!-- note: as of 0.4.13, you cannot use 'literally' as the class name.
         sorry about that. -->
    <div class="my-drawing"></div>

    <!-- kick it off -->
    <script>
        LC.init(
            document.getElementsByClassName('my-drawing')[0],
            {imageURLPrefix: '/static/img'}
        );
    </script>
  </body>
</html>

React.js Style

Literally Canvas can be used as a React component!

<html>
  <head>
    <!-- stylesheet -->
    <link href="/static/css/literallycanvas.css" rel="stylesheet">

    <!-- dependency: React.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <!-- Literally Canvas -->
    <script src="/static/js/literallycanvas.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
        ReactDOM.render(
            <div>
                <LC.LiterallyCanvasReactComponent imageURLPrefix="/static/img" />
            </div>,
            document.getElementById('root'));
    </script>
  </body>
</html>

Reply all

Reply to author

Forward

0 new messages