detect close path in canvas





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















Hi I'm searching to find a way to close path with javascript.
I can draw a series of straight lines by clicking on the canvas but I want that when the line are closed the object create takes a grey background.
Like in this example when you close the wall the room appears






var needFirstPoint = true;

function drawNextLine(ctx, x, y) {
if (needFirstPoint) {
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(x, y);
needFirstPoint = false;
}
else {
ctx.lineTo(x, y);
ctx.stroke();
}
}

$(document).ready(function(){
var canvas = $('#myCanvas').get(0);
if (!canvas.getContext) { return; }
var ctx = canvas.getContext('2d');

$('#myCanvas').on('click', function(e){
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
drawNextLine(ctx, x, y);
});
});

canvas {
border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="600" height="600"></canvas>





I don't know how to detect a close path that could form an object










share|improve this question































    1















    Hi I'm searching to find a way to close path with javascript.
    I can draw a series of straight lines by clicking on the canvas but I want that when the line are closed the object create takes a grey background.
    Like in this example when you close the wall the room appears






    var needFirstPoint = true;

    function drawNextLine(ctx, x, y) {
    if (needFirstPoint) {
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.moveTo(x, y);
    needFirstPoint = false;
    }
    else {
    ctx.lineTo(x, y);
    ctx.stroke();
    }
    }

    $(document).ready(function(){
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');

    $('#myCanvas').on('click', function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    drawNextLine(ctx, x, y);
    });
    });

    canvas {
    border: 1px solid #000;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <canvas id="myCanvas" width="600" height="600"></canvas>





    I don't know how to detect a close path that could form an object










    share|improve this question



























      1












      1








      1


      1






      Hi I'm searching to find a way to close path with javascript.
      I can draw a series of straight lines by clicking on the canvas but I want that when the line are closed the object create takes a grey background.
      Like in this example when you close the wall the room appears






      var needFirstPoint = true;

      function drawNextLine(ctx, x, y) {
      if (needFirstPoint) {
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(x, y);
      needFirstPoint = false;
      }
      else {
      ctx.lineTo(x, y);
      ctx.stroke();
      }
      }

      $(document).ready(function(){
      var canvas = $('#myCanvas').get(0);
      if (!canvas.getContext) { return; }
      var ctx = canvas.getContext('2d');

      $('#myCanvas').on('click', function(e){
      var offset = $(this).offset();
      var x = e.pageX - offset.left;
      var y = e.pageY - offset.top;
      drawNextLine(ctx, x, y);
      });
      });

      canvas {
      border: 1px solid #000;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <canvas id="myCanvas" width="600" height="600"></canvas>





      I don't know how to detect a close path that could form an object










      share|improve this question
















      Hi I'm searching to find a way to close path with javascript.
      I can draw a series of straight lines by clicking on the canvas but I want that when the line are closed the object create takes a grey background.
      Like in this example when you close the wall the room appears






      var needFirstPoint = true;

      function drawNextLine(ctx, x, y) {
      if (needFirstPoint) {
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(x, y);
      needFirstPoint = false;
      }
      else {
      ctx.lineTo(x, y);
      ctx.stroke();
      }
      }

      $(document).ready(function(){
      var canvas = $('#myCanvas').get(0);
      if (!canvas.getContext) { return; }
      var ctx = canvas.getContext('2d');

      $('#myCanvas').on('click', function(e){
      var offset = $(this).offset();
      var x = e.pageX - offset.left;
      var y = e.pageY - offset.top;
      drawNextLine(ctx, x, y);
      });
      });

      canvas {
      border: 1px solid #000;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <canvas id="myCanvas" width="600" height="600"></canvas>





      I don't know how to detect a close path that could form an object






      var needFirstPoint = true;

      function drawNextLine(ctx, x, y) {
      if (needFirstPoint) {
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(x, y);
      needFirstPoint = false;
      }
      else {
      ctx.lineTo(x, y);
      ctx.stroke();
      }
      }

      $(document).ready(function(){
      var canvas = $('#myCanvas').get(0);
      if (!canvas.getContext) { return; }
      var ctx = canvas.getContext('2d');

      $('#myCanvas').on('click', function(e){
      var offset = $(this).offset();
      var x = e.pageX - offset.left;
      var y = e.pageY - offset.top;
      drawNextLine(ctx, x, y);
      });
      });

      canvas {
      border: 1px solid #000;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <canvas id="myCanvas" width="600" height="600"></canvas>





      var needFirstPoint = true;

      function drawNextLine(ctx, x, y) {
      if (needFirstPoint) {
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(x, y);
      needFirstPoint = false;
      }
      else {
      ctx.lineTo(x, y);
      ctx.stroke();
      }
      }

      $(document).ready(function(){
      var canvas = $('#myCanvas').get(0);
      if (!canvas.getContext) { return; }
      var ctx = canvas.getContext('2d');

      $('#myCanvas').on('click', function(e){
      var offset = $(this).offset();
      var x = e.pageX - offset.left;
      var y = e.pageY - offset.top;
      drawNextLine(ctx, x, y);
      });
      });

      canvas {
      border: 1px solid #000;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <canvas id="myCanvas" width="600" height="600"></canvas>






      javascript html5-canvas






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 22 '18 at 15:24







      sonia maklouf

















      asked Nov 21 '18 at 22:14









      sonia makloufsonia maklouf

      7322620




      7322620
























          2 Answers
          2






          active

          oldest

          votes


















          2














          EDIT: There is a simpler solution. Remember the position of the first click and check if any of the subsequent clicks are nearby.



          https://codepen.io/anon/pen/pQLwGK



          var startX = -1, startY = -1; 

          function dist(x0,y0,x1,y1)
          {
          return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
          }

          $(document).ready(function()
          {
          var canvas = $('#myCanvas').get(0);
          if (!canvas.getContext) { return; }
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = '#f00';
          ctx.beginPath();
          $('#myCanvas').on('click', function(e)
          {
          console.log('click');
          var offset = $(this).offset();
          var x = e.pageX - offset.left;
          var y = e.pageY - offset.top;
          if (startX === -1)
          {
          console.log('start position is set to ',x ,y);
          startX = x;
          startY = y;
          ctx.moveTo(x,y);
          }
          else
          {
          // checking if a click is within 20px of the starting point
          if (dist(startX, startY,x,y ) < 20)
          {
          // assume that polygon is closed
          ctx.lineTo(startX,startY);
          ctx.fill();
          console.log('fill');
          }
          else
          {
          ctx.lineTo(x,y);
          }
          ctx.stroke();
          }
          });
          });





          share|improve this answer


























          • it didn't seem to work : codepen.io/anon/pen/XyZZLY

            – sonia maklouf
            Nov 21 '18 at 23:50











          • Please try my updated solution.

            – Eriks Klotins
            Nov 22 '18 at 21:20



















          -1














          Save the value of your first point to a variable. If a subsequent x,y is within the threshold you want, close the ploygon and apply the fill.






          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%2f53421187%2fdetect-close-path-in-canvas%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            2














            EDIT: There is a simpler solution. Remember the position of the first click and check if any of the subsequent clicks are nearby.



            https://codepen.io/anon/pen/pQLwGK



            var startX = -1, startY = -1; 

            function dist(x0,y0,x1,y1)
            {
            return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
            }

            $(document).ready(function()
            {
            var canvas = $('#myCanvas').get(0);
            if (!canvas.getContext) { return; }
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            $('#myCanvas').on('click', function(e)
            {
            console.log('click');
            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            if (startX === -1)
            {
            console.log('start position is set to ',x ,y);
            startX = x;
            startY = y;
            ctx.moveTo(x,y);
            }
            else
            {
            // checking if a click is within 20px of the starting point
            if (dist(startX, startY,x,y ) < 20)
            {
            // assume that polygon is closed
            ctx.lineTo(startX,startY);
            ctx.fill();
            console.log('fill');
            }
            else
            {
            ctx.lineTo(x,y);
            }
            ctx.stroke();
            }
            });
            });





            share|improve this answer


























            • it didn't seem to work : codepen.io/anon/pen/XyZZLY

              – sonia maklouf
              Nov 21 '18 at 23:50











            • Please try my updated solution.

              – Eriks Klotins
              Nov 22 '18 at 21:20
















            2














            EDIT: There is a simpler solution. Remember the position of the first click and check if any of the subsequent clicks are nearby.



            https://codepen.io/anon/pen/pQLwGK



            var startX = -1, startY = -1; 

            function dist(x0,y0,x1,y1)
            {
            return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
            }

            $(document).ready(function()
            {
            var canvas = $('#myCanvas').get(0);
            if (!canvas.getContext) { return; }
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            $('#myCanvas').on('click', function(e)
            {
            console.log('click');
            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            if (startX === -1)
            {
            console.log('start position is set to ',x ,y);
            startX = x;
            startY = y;
            ctx.moveTo(x,y);
            }
            else
            {
            // checking if a click is within 20px of the starting point
            if (dist(startX, startY,x,y ) < 20)
            {
            // assume that polygon is closed
            ctx.lineTo(startX,startY);
            ctx.fill();
            console.log('fill');
            }
            else
            {
            ctx.lineTo(x,y);
            }
            ctx.stroke();
            }
            });
            });





            share|improve this answer


























            • it didn't seem to work : codepen.io/anon/pen/XyZZLY

              – sonia maklouf
              Nov 21 '18 at 23:50











            • Please try my updated solution.

              – Eriks Klotins
              Nov 22 '18 at 21:20














            2












            2








            2







            EDIT: There is a simpler solution. Remember the position of the first click and check if any of the subsequent clicks are nearby.



            https://codepen.io/anon/pen/pQLwGK



            var startX = -1, startY = -1; 

            function dist(x0,y0,x1,y1)
            {
            return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
            }

            $(document).ready(function()
            {
            var canvas = $('#myCanvas').get(0);
            if (!canvas.getContext) { return; }
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            $('#myCanvas').on('click', function(e)
            {
            console.log('click');
            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            if (startX === -1)
            {
            console.log('start position is set to ',x ,y);
            startX = x;
            startY = y;
            ctx.moveTo(x,y);
            }
            else
            {
            // checking if a click is within 20px of the starting point
            if (dist(startX, startY,x,y ) < 20)
            {
            // assume that polygon is closed
            ctx.lineTo(startX,startY);
            ctx.fill();
            console.log('fill');
            }
            else
            {
            ctx.lineTo(x,y);
            }
            ctx.stroke();
            }
            });
            });





            share|improve this answer















            EDIT: There is a simpler solution. Remember the position of the first click and check if any of the subsequent clicks are nearby.



            https://codepen.io/anon/pen/pQLwGK



            var startX = -1, startY = -1; 

            function dist(x0,y0,x1,y1)
            {
            return Math.sqrt( Math.pow(x1-x0,2) + Math.pow(y1-y0,2));
            }

            $(document).ready(function()
            {
            var canvas = $('#myCanvas').get(0);
            if (!canvas.getContext) { return; }
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            $('#myCanvas').on('click', function(e)
            {
            console.log('click');
            var offset = $(this).offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            if (startX === -1)
            {
            console.log('start position is set to ',x ,y);
            startX = x;
            startY = y;
            ctx.moveTo(x,y);
            }
            else
            {
            // checking if a click is within 20px of the starting point
            if (dist(startX, startY,x,y ) < 20)
            {
            // assume that polygon is closed
            ctx.lineTo(startX,startY);
            ctx.fill();
            console.log('fill');
            }
            else
            {
            ctx.lineTo(x,y);
            }
            ctx.stroke();
            }
            });
            });






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 22 '18 at 21:10

























            answered Nov 21 '18 at 22:27









            Eriks KlotinsEriks Klotins

            1,4281518




            1,4281518













            • it didn't seem to work : codepen.io/anon/pen/XyZZLY

              – sonia maklouf
              Nov 21 '18 at 23:50











            • Please try my updated solution.

              – Eriks Klotins
              Nov 22 '18 at 21:20



















            • it didn't seem to work : codepen.io/anon/pen/XyZZLY

              – sonia maklouf
              Nov 21 '18 at 23:50











            • Please try my updated solution.

              – Eriks Klotins
              Nov 22 '18 at 21:20

















            it didn't seem to work : codepen.io/anon/pen/XyZZLY

            – sonia maklouf
            Nov 21 '18 at 23:50





            it didn't seem to work : codepen.io/anon/pen/XyZZLY

            – sonia maklouf
            Nov 21 '18 at 23:50













            Please try my updated solution.

            – Eriks Klotins
            Nov 22 '18 at 21:20





            Please try my updated solution.

            – Eriks Klotins
            Nov 22 '18 at 21:20













            -1














            Save the value of your first point to a variable. If a subsequent x,y is within the threshold you want, close the ploygon and apply the fill.






            share|improve this answer




























              -1














              Save the value of your first point to a variable. If a subsequent x,y is within the threshold you want, close the ploygon and apply the fill.






              share|improve this answer


























                -1












                -1








                -1







                Save the value of your first point to a variable. If a subsequent x,y is within the threshold you want, close the ploygon and apply the fill.






                share|improve this answer













                Save the value of your first point to a variable. If a subsequent x,y is within the threshold you want, close the ploygon and apply the fill.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 21 '18 at 22:26









                CodeTheInternetCodeTheInternet

                14




                14






























                    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%2f53421187%2fdetect-close-path-in-canvas%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







                    Popular posts from this blog

                    Guess what letter conforming each word

                    Port of Spain

                    Run scheduled task as local user group (not BUILTIN)