How to get responsive of canvas paperjs view












1















I am using tokbox annotations. My functionality is working fine.



I am using https://github.com/aullman/opentok-whiteboard



But the problem is my canvas width is 880x520 in the web. But how to scale view size for mobiles? If I use 100% width on mobile devices. but how to match coordinates same on web and mobile devices.










share|improve this question



























    1















    I am using tokbox annotations. My functionality is working fine.



    I am using https://github.com/aullman/opentok-whiteboard



    But the problem is my canvas width is 880x520 in the web. But how to scale view size for mobiles? If I use 100% width on mobile devices. but how to match coordinates same on web and mobile devices.










    share|improve this question

























      1












      1








      1








      I am using tokbox annotations. My functionality is working fine.



      I am using https://github.com/aullman/opentok-whiteboard



      But the problem is my canvas width is 880x520 in the web. But how to scale view size for mobiles? If I use 100% width on mobile devices. but how to match coordinates same on web and mobile devices.










      share|improve this question














      I am using tokbox annotations. My functionality is working fine.



      I am using https://github.com/aullman/opentok-whiteboard



      But the problem is my canvas width is 880x520 in the web. But how to scale view size for mobiles? If I use 100% width on mobile devices. but how to match coordinates same on web and mobile devices.







      responsive-design paperjs tokbox






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 '18 at 10:33









      murali krishnamurali krishna

      46831135




      46831135
























          1 Answer
          1






          active

          oldest

          votes


















          2














          The easiest way to do what you want is too rely on Paper.js built-in resize handling:




          • add resize attribute to your <canvas> (see "Canvas Configuration" part in the documentation)

          • setup an event handler callback as view.onResize value, to update your project accordingly to the new view size





          // setup paper
          paper.setup('canvas');

          // draw a circle at view center
          var circle = new paper.Path.Circle({
          center: paper.view.center,
          radius: 50,
          fillColor: 'orange'
          });

          // when view is resized...
          paper.view.onResize = function() {
          // ...log new view width
          console.log('view.width is now: ' + paper.view.bounds.width);
          // ...place circle at new view center
          circle.position = paper.view.center;
          };

          // draw instructions
          new paper.PointText({
          content: 'Resize the window and see that view is automatically resized',
          point: paper.view.center.subtract(0, 80),
          justification: 'center'
          });

          html,
          body {
          margin: 0;
          overflow: hidden;
          height: 100%;
          }


          /* Scale canvas with resize attribute to full size */

          canvas[resize] {
          width: 100%;
          height: 100%;
          }

          <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
          <canvas id="canvas" resize></canvas>








          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391067%2fhow-to-get-responsive-of-canvas-paperjs-view%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            2














            The easiest way to do what you want is too rely on Paper.js built-in resize handling:




            • add resize attribute to your <canvas> (see "Canvas Configuration" part in the documentation)

            • setup an event handler callback as view.onResize value, to update your project accordingly to the new view size





            // setup paper
            paper.setup('canvas');

            // draw a circle at view center
            var circle = new paper.Path.Circle({
            center: paper.view.center,
            radius: 50,
            fillColor: 'orange'
            });

            // when view is resized...
            paper.view.onResize = function() {
            // ...log new view width
            console.log('view.width is now: ' + paper.view.bounds.width);
            // ...place circle at new view center
            circle.position = paper.view.center;
            };

            // draw instructions
            new paper.PointText({
            content: 'Resize the window and see that view is automatically resized',
            point: paper.view.center.subtract(0, 80),
            justification: 'center'
            });

            html,
            body {
            margin: 0;
            overflow: hidden;
            height: 100%;
            }


            /* Scale canvas with resize attribute to full size */

            canvas[resize] {
            width: 100%;
            height: 100%;
            }

            <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
            <canvas id="canvas" resize></canvas>








            share|improve this answer




























              2














              The easiest way to do what you want is too rely on Paper.js built-in resize handling:




              • add resize attribute to your <canvas> (see "Canvas Configuration" part in the documentation)

              • setup an event handler callback as view.onResize value, to update your project accordingly to the new view size





              // setup paper
              paper.setup('canvas');

              // draw a circle at view center
              var circle = new paper.Path.Circle({
              center: paper.view.center,
              radius: 50,
              fillColor: 'orange'
              });

              // when view is resized...
              paper.view.onResize = function() {
              // ...log new view width
              console.log('view.width is now: ' + paper.view.bounds.width);
              // ...place circle at new view center
              circle.position = paper.view.center;
              };

              // draw instructions
              new paper.PointText({
              content: 'Resize the window and see that view is automatically resized',
              point: paper.view.center.subtract(0, 80),
              justification: 'center'
              });

              html,
              body {
              margin: 0;
              overflow: hidden;
              height: 100%;
              }


              /* Scale canvas with resize attribute to full size */

              canvas[resize] {
              width: 100%;
              height: 100%;
              }

              <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
              <canvas id="canvas" resize></canvas>








              share|improve this answer


























                2












                2








                2







                The easiest way to do what you want is too rely on Paper.js built-in resize handling:




                • add resize attribute to your <canvas> (see "Canvas Configuration" part in the documentation)

                • setup an event handler callback as view.onResize value, to update your project accordingly to the new view size





                // setup paper
                paper.setup('canvas');

                // draw a circle at view center
                var circle = new paper.Path.Circle({
                center: paper.view.center,
                radius: 50,
                fillColor: 'orange'
                });

                // when view is resized...
                paper.view.onResize = function() {
                // ...log new view width
                console.log('view.width is now: ' + paper.view.bounds.width);
                // ...place circle at new view center
                circle.position = paper.view.center;
                };

                // draw instructions
                new paper.PointText({
                content: 'Resize the window and see that view is automatically resized',
                point: paper.view.center.subtract(0, 80),
                justification: 'center'
                });

                html,
                body {
                margin: 0;
                overflow: hidden;
                height: 100%;
                }


                /* Scale canvas with resize attribute to full size */

                canvas[resize] {
                width: 100%;
                height: 100%;
                }

                <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
                <canvas id="canvas" resize></canvas>








                share|improve this answer













                The easiest way to do what you want is too rely on Paper.js built-in resize handling:




                • add resize attribute to your <canvas> (see "Canvas Configuration" part in the documentation)

                • setup an event handler callback as view.onResize value, to update your project accordingly to the new view size





                // setup paper
                paper.setup('canvas');

                // draw a circle at view center
                var circle = new paper.Path.Circle({
                center: paper.view.center,
                radius: 50,
                fillColor: 'orange'
                });

                // when view is resized...
                paper.view.onResize = function() {
                // ...log new view width
                console.log('view.width is now: ' + paper.view.bounds.width);
                // ...place circle at new view center
                circle.position = paper.view.center;
                };

                // draw instructions
                new paper.PointText({
                content: 'Resize the window and see that view is automatically resized',
                point: paper.view.center.subtract(0, 80),
                justification: 'center'
                });

                html,
                body {
                margin: 0;
                overflow: hidden;
                height: 100%;
                }


                /* Scale canvas with resize attribute to full size */

                canvas[resize] {
                width: 100%;
                height: 100%;
                }

                <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
                <canvas id="canvas" resize></canvas>








                // setup paper
                paper.setup('canvas');

                // draw a circle at view center
                var circle = new paper.Path.Circle({
                center: paper.view.center,
                radius: 50,
                fillColor: 'orange'
                });

                // when view is resized...
                paper.view.onResize = function() {
                // ...log new view width
                console.log('view.width is now: ' + paper.view.bounds.width);
                // ...place circle at new view center
                circle.position = paper.view.center;
                };

                // draw instructions
                new paper.PointText({
                content: 'Resize the window and see that view is automatically resized',
                point: paper.view.center.subtract(0, 80),
                justification: 'center'
                });

                html,
                body {
                margin: 0;
                overflow: hidden;
                height: 100%;
                }


                /* Scale canvas with resize attribute to full size */

                canvas[resize] {
                width: 100%;
                height: 100%;
                }

                <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
                <canvas id="canvas" resize></canvas>





                // setup paper
                paper.setup('canvas');

                // draw a circle at view center
                var circle = new paper.Path.Circle({
                center: paper.view.center,
                radius: 50,
                fillColor: 'orange'
                });

                // when view is resized...
                paper.view.onResize = function() {
                // ...log new view width
                console.log('view.width is now: ' + paper.view.bounds.width);
                // ...place circle at new view center
                circle.position = paper.view.center;
                };

                // draw instructions
                new paper.PointText({
                content: 'Resize the window and see that view is automatically resized',
                point: paper.view.center.subtract(0, 80),
                justification: 'center'
                });

                html,
                body {
                margin: 0;
                overflow: hidden;
                height: 100%;
                }


                /* Scale canvas with resize attribute to full size */

                canvas[resize] {
                width: 100%;
                height: 100%;
                }

                <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
                <canvas id="canvas" resize></canvas>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 20 '18 at 10:56









                sasensisasensi

                1,393216




                1,393216
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391067%2fhow-to-get-responsive-of-canvas-paperjs-view%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    這個網誌中的熱門文章

                    Xamarin.form Move up view when keyboard appear

                    Post-Redirect-Get with Spring WebFlux and Thymeleaf

                    Anylogic : not able to use stopDelay()