detect close path in canvas

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

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

add a comment |

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

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

add a comment |

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

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

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

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

edited Nov 22 '18 at 15:24

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

asked Nov 21 '18 at 22:14

sonia maklouf

5832519

add a comment |

2 Answers
2

active

oldest

votes

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();

        }

    });

});

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

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

add a comment |

-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.

answered Nov 21 '18 at 22:26

CodeTheInternet

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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();

        }

    });

});

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

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

add a comment |

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();

        }

    });

});

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

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

add a comment |

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();

        }

    });

});

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

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();

        }

    });

});

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

edited Nov 22 '18 at 21:10

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

answered Nov 21 '18 at 22:27

Eriks Klotins

1,128516

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

add a comment |

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

add a comment |

-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.

answered Nov 21 '18 at 22:26

CodeTheInternet

add a comment |

-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.

answered Nov 21 '18 at 22:26

CodeTheInternet

add a comment |

-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.

answered Nov 21 '18 at 22:26

CodeTheInternet

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.

answered Nov 21 '18 at 22:26

CodeTheInternet

answered Nov 21 '18 at 22:26

CodeTheInternet

answered Nov 21 '18 at 22:26

CodeTheInternet

answered Nov 21 '18 at 22:26

CodeTheInternet

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk