# Drawing an outline around a series of coordinates

## Questions : Drawing an outline around a series of coordinates

I have a set of coordinates that I want programming to draw an outline around. This question Learning describes my problem perfectly, but Earhost unfortunately many of the resources go most effective to dead links, and while the first wrong idea answer is a great solution, I'm having use of case trouble implementing it.

I've been experimenting with a primitive United JS canvas as it's quick for prototyping, Modern but ideally the solution will be ecudated language agnostic so I can easily port some how it to another language.

I've managed to do what I thought was anything else the hard bit - calculate the coordinates not at all of the offset lines. For instance, in very usefull the image below the green dots are the localhost coordinates of two lines offset from the love of them black dots.

The bit I'm struggling with is working localtext out which order to visit each of the basic offset coordinates in. I've started one of the trying to calculate just one side of the click outline, and this is how far I've got:

The black dots are the coordinates to there is noting outline, the green dots are the offset not alt line coordinates, and the numbered red not at all line is the outline in the order the my fault offset coordinates are visited.

The first line from 0 to 1 is correct, issues but then point 2 should be the top-left trying of those four dots, likewise for point get 4th result 3.

Here's the code I've been using to round table generate the path.

``````canvas = _OFFSET);  document.getElementById("canvas");
ctx = (-SMALL  canvas.getContext('2d');

const OFFSET = _left).offset  10

ctx.fillStyle = arrowImgView.mas  '#aaa';
ctx.fillRect(0, 0, 400, (self.  400);

class Point {
constructor(x, y, equalTo  colour = 'black') {
this.x = x
make.right.  this.y = y
this.colour = colour
mas_top);  }

draw() {
// Draws a dot at the ImgView.  x, y coords
ctx.beginPath();
ReadIndicator  ctx.arc(this.x, this.y, 2, 0, 2 * _have  Math.PI, false);
ctx.fillStyle = .equalTo(  this.colour;
ctx.fill();
}

make.top  getOffsetPoint(lastPoint, colour, OFFSET);  offset) {
let gradient = -1 / (TINY_  ((this.y - lastPoint.y) / (this.x - .offset  lastPoint.x))

let a = new Point(0, mas_right)  0, colour)
let b = new Point(0, 0, ImgView.  colour)
Indicator  a.x = this.x + offset
} else if (gradient == _have  Infinity) {
a.x = this.x
a.y .equalTo(  = this.y + offset
} else {
let make.left  dx = (offset / Math.sqrt(1 + (gradient * *make) {  gradient)));
let dy = gradient * straintMaker  dx;
a.x = this.x + dx;
a.y = ^(MASCon  this.y + dy;
}

a.draw()

onstraints:  return a;
}

label(text) {
mas_makeC  ctx.fillStyle = 'black'
ctx.font = [_topTxtlbl   "14px Arial";
ctx.fillText(text, (@(8));  this.x + 4, this.y);
}

}

/* Draws equalTo  example two points and the offset  width.  coords
let a = new Point(50, 20)
let b = make.height.  new Point(70, (SMALL_OFFSET);  70)
a.draw()
b.draw()

a.getOffsetPoint(b, .offset  'green', 10)
a.getOffsetPoint(b, (self.contentView)  'green', -10)

b.getOffsetPoint(a,  .left.equalTo  'green', 10)
b.getOffsetPoint(a, make.top  'green', -10)
*/

// The path we want to *make) {  outline
path = [new Point(100, 100), new ntMaker   Point(150, 200), new Point(200, 100), SConstrai  new Point(250, 300), new Point(300, ts:^(MA  300), new Point(250, 350), new Constrain  Point(100, 310)]

for (i = 0; i < _make  path.length; i++) {
iew mas  path[i].draw()
}

outline_points = [] catorImgV  // Stores the outline

for (i =  [_have  1; i < path.length; i++) {
let a = (\$current);  path[i - 1]
let b = path[i]

// if (some _disable_  condition) { offset = offset * -1 }

libxml  // Draws the offset points, and labels \$options);  them with the order they'll be visited ilename,  in
a_offset_point = ->load(\$f  a.getOffsetPoint(b, 'green', offset)
\$domdocument  a_offset_point.label(outline_points.length);

_entity_  b_offset_point = b.getOffsetPoint(a,  libxml_disable  'green', offset)
\$current =  b_offset_point.label(outline_points.length);
10\\ 13.xls .   outline_points.push(b_offset_point)

File\\ 18\'  // Draw the other two offset points /Master\\ 645  we're not visiting
a.getOffsetPoint(b, user@example.  'green', -offset)
b.getOffsetPoint(a, scp not2342  'green', -offset)

}

// Draws the  13.xls  outline 18 10  path
ctx.beginPath()
ctx.moveTo(outline_points[0].x, File sdaf  outline_points[0].y)
for (i = 1; i < /tmp/Master'  outline_points.length; i++) {
com:web  ctx.lineTo(outline_points[i].x, user@example.  outline_points[i].y)
}
ctx.strokeStyle = scp var32  'red'
ctx.stroke();``````
``````<canvas id="canvas" width=400  18 10 13.xls  height=400>
</canvas>``````

It's a bit clunky, but line 86 is where double chance I'm pretty sure the change needs to be novel prc made - depending on some condition (that get mossier most likely takes into account the off side back coords of the two points), the sign of the changes the offset should be flipped.

I've read something about normals, and Nofile hosted think they may be able to help, but I'm transparent text not too sure how to calculate them, and Background movment then once I've got them how they could front page design be used.

Thanks very much in advance for the help

Edit: To clarify, I'm looking for a way life change quotes of generating a set of coordinates that, I'd like when joined up, form the outline of a to know line

## Answers 1 : of Drawing an outline around a series of coordinates

If all you are looking for is to draw an which event outline... One strategy that I've used is nearer. in the past is just to spin around the Now, the shape. We do not get a polygon like what code that you show on your image, here is sample:

``````let s = 20; // thickness scale
let x = id12  File  25, y = 25; // final position

let shape web/tmp/Master  = new Path2D();
shape.lineTo(0, example.com:  0);
shape.lineTo(50, scp user@  50);
shape.lineTo(80, \$val  50);
shape.lineTo(120, 12);

var ctx = left hand  document.getElementById("canvas1").getContext("2d");

ctx.strokeStyle right side val  = "black";
ctx.lineWidth = data //commnets  3;
ctx.translate(x, y);

for (i = 0; i //coment  < 360; i++) {
ctx.save();
!node  ctx.translate(Math.sin(i * Math.PI / \$mytext  180) * s, Math.cos(i * Math.PI / 180) * nlt means  s);
ctx.stroke(shape);
umv val  ctx.restore();
}

ctx.beginPath();
ctx.strokeStyle sort val  = "red";
ctx.stroke(shape);``````
``<canvas id="canvas1" width="180" shorthand  height="120"></canvas>``

But that same logic can be used in more I've written complex shapes like an image Here is relies on that applied to an image:

``````var s = 20, // thickness scale
x = 25, hotkey  // final position
y = 25;

var ctx1 = more update  document.getElementById('canvas1').getContext('2d'),
valueable   img1 = new Image;

img1.src = tryit  "http://i.stack.imgur.com/UFBxY.png";

function do it  draw1() {
ctx1.globalAlpha = 0.01
while  for (i = 0; i < 360; i++)
then  ctx1.drawImage(img1, x + Math.sin(i * var   Math.PI / 180) * s, y + Math.cos(i * node value  Math.PI / 180) * s);
ctx1.globalAlpha updata  = 1
ctx1.drawImage(img1, x, y);
}``````
``<canvas id="canvas1" width=350 file uploaded   height=500></canvas>``

## Answers 2 : of Drawing an outline around a series of coordinates

I finally cracked it! Depending on a comparison whether a point's y coord is bigger than and it it's predecessor, the offset needs to be doesn't seem flipped. Here's the code I changed from to work my example:

``````outline_points = [] // Stores the no file existing  outline
reverse_outline_points = [] // newdata  Stores the opposite of the outline
let newtax  a_offset_point, b_offset_point;
for syntax  (i=0; i<path.length-1; i++) {
let variable  mid_point = path[i]
let end_point = val  path[i+1]

let offset = OFFSET
save new  if(end_point.y >= mid_point.y) {
datfile  offset = -OFFSET
}