Scale a polygon so the edges match up

Question

I'm working on a project using a JavaScript canvas and need to be able to snap the cursor to a certain distance from a polygon. I can already snap to the polygon itself, but I need to have the cursor farther away.

As far as I can tell the best way to go about this is to scale the polygon and snap to that, but when I scale the polygon the distance between the edges of the old polygon and the edges of the new polygon don't always match up.

here is an example of the problem:

Edit: The grey represents the original polygon, the red is what I am getting if I scale the polygon normally, and the green is what I'm trying to accomplish

I've already tried translating the polygon to the origin and multiplying by a scale factor, but can't seem to scale each edge by a specific distance.

Answer 1

I made a javascript port of Clipper and with it you can do the scaling in the way you want.

This is an example of inflating polygon:

Check the LIVE DEMO of Javascript Clipper.

and get the clipper.js file from https://sourceforge.net/projects/jsclipper/ .

Full code example of how to offset polygons and and draw them on html5 canvas.

The opposite (deflating) is also possible, if needed: