We Keep Coding

Converting a the outlines of a free drawn path to a polygon

I want to segment multiple objects within an image using the fabric.js javascript library.
For this example, I want to segment the surfboard. I then want want to convert the drawn shape to a polygon with the coordinates of the outer regions corresponding to the pixel coordinates of the images.
Drawing an segmentation itself it quite straightforward using fabric.js's build in free drawing brush.
I can then convert the coordinates of the drawn path to a polygon using this piece of code:
canvas.on('path:created', function(el){
var path = el.path.path
var points = []
for (var i = 0; i < path.length; i++){
point = {
x: Math.round(path[i][1]),
y: Math.round(path[i][2])
}
points.push(point)
}
shape = new fabric.Polygon(points, {
stroke: 'red',
opacity: 0.5,
strokeWidth: 1,
description: 'aaa',
fill: 'transparent',
});
canvas.add(shape)
})
The red/black link is how I was drawing using the mouse.
After turning drawing mode off and dragging them away, the 2 created objects (the Path from drawing and the polygon) look as follows.
However, because the brush has a certain width, and because of overlapping Path regions, my method of converting it to a poly is not working well.
So I don't want the current polygon I'm outputting (the red one), but instead the outline of the green section. How can I achieve this?
Working fiddle: https://jsfiddle.net/haw54v9L/3/

the free draw paths are many polylines, you must change the polylines to a ploygon. ClipperLib can do this. but there is an accuracy problem when canvas zoom out or zoom in.

Calculate area covered by GeoJSON LineString and specified weight of line

I use the following code to draw a GPS track with Leaflet:
const trackJson: L.GeoJSON = L.geoJSON(trackAsJson, {
style: {
color: '#ff0000',
weight: 30,
opacity: 1
}
});
I'd like now calculate the area that is covered by this track, drawn with the specified weight/width. However, I can't find any way to achieve that. All methods that I could find require to have some form of a shape and not just only a line. So I'm either looking for a way to:
Turn the path and the specified weight into a shape
or
Find a direct method to calculate the area of a path and a weight.

If you just need an approximation, you could render the track / path and count the pixels.
How to calculate the area of a java.awt.geom.Area?

How to get L.polygon border, excluding inner points

I am working with Leaflet.js library. I have an array of geographical points, described by latitude and longitude and a polygon, based on this points. How can i remove inner points of polygon and draw only it's outer border?
Array of points
[[53, 31], [51.4, 31.2], [51.3, 32] ... etc.] //it's length ~ 500 points.
Initializing map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
Setting polygon
L.polygon(points, {color: 'red'}).addTo(mymap);
This is what i have right now. Here is all of 500 points is shown.
Result i am expecting. Here all internal points are removed, showing the covered area.

Sounds like you are looking for a convex hull algorithm: it would provide you with the "envelope" of your Points.
You can use e.g. Turfjs: https://turfjs.org/docs/#convex
But note that it requires working with data converted to GeoJSON objects.
You can also have a look at how Leaflet.markercluster plugin has implemented it.

Getting intersection between existing layer and drawn shape

EDIT I now get the right layer from map, so the question now sums up to knowing if a layer A which contains curves, intersectects layer B which contains a surface which can be a circle or a polygon that was just drawn. I tried turf library's turf.intersect but I get "cyclic object reference" from that library.
And I am already looping through the curves seperaterly, to the question is now "Does a curve intersect with a shape.
Also tried: ol.extent.getIntersection(...) but it work only with extents wich are rectangle and therefore give very imprecise results.
I have a map and a layer that is built and added through
var layer = new ol.layer.Vector{(...)};
map.addLayer(layer);
And I add a layer through interaction, as shown in this example: http://openlayers.org/en/v3.6.0/examples/draw-features.html?q=draw
(We use the Circle selection.)
I would like to get he intersection between the lines in the fist layer and the shape (surface) drawn through interaction.
So far, I know that I can catch the event:
var draw = new ol.interaction.Draw{(...)};
draw.on('drawend', function(event){(...)};
But so far I have no clue on what information I can get from the event and how to match it with the layer.

Draw Polygons on a map using WebGL's drawArrays

I am trying to draw polygons on a map, using OSM data downloaded. I have written a query that returns a list of polygons from the planet_osm_polygon table. It resturns the list as JSON objects. I am using gl.drawArrays(gl.LINESTRIP, 0, json_data_length) to draw the polygons. I have done the same for points- I have a list of points returned and I have been able to plot them using gl.POINTS.
The problem is, I want each of the polygons to be drawn separately, but I guess using LINE_STRIP is connecting one ending point of one polygon to the starting point of another polygon.
For example, I want civic center plaza and buchanan street in SFO to be separate polygons. But the polygons, after being drawn, are still connected to each other through one point. I want these two to be drawn as separate polygons. How do I do it?
I do not want to use any libraries. Just basic WebGL. My JavaScript code takes the lat-long coordinates from my osm database and converts into pixel coordinates to help plotting- see link: WebGL shader code (http://psousa.net/demos/webgl/) I am using this example and extending it.

If i understood correctly you want to draw 'borders' of multiple polygons not the filled polygon itself.
In order to draw seperate lines in a single draw call you should use gl.LINES mode instead of gl.LINESTRIP.
Lets say you have a quad which has points A,B,C,D and a triangle which has points X Y Z. If you want to use glDrawArrays command with GL_LINES mode , your vertex data should be submitted as
{A,B, B,C, C,D, D,A, X,Y, Y,Z, Z,X}
Following lines are drawn with this vertex data
Line from A to B
Line from B to C
Line from C to D
Line from D to A
Line from X to Y
Line from Y to Z
Line from Z to X
In order to eliminate duplicate vertex data you can also use glDrawElements with a proper index .