Рассмотрим следующую настройку:

CSS:

div {
    position :absolute;
    top: 50px;
    left: 50px;
    height: 200px;
    width: 200px;
    border: 2px solid black;
}

HTML:

<div id="container">
    <canvas id="my-canvas"/>
</div>

Сейчас внутри#my-canvas Я хочу иметь возможность рисовать многоугольник с любым количеством углов, которые всегда расположены на одной из его сторон (а не на одном из его углов). Высота и ширина, которую многоугольник будет «занимать», всегда должна быть равна его родительскому элементу (в данном случае 200px X 200px), который мы предположим, что он всегда будет квадратным.

Существует ли стандартный алгоритм для достижения этого (без использования каких-либо библиотек JS)?

Рисование многоугольника с 4 углами внутри#my-container Я думаю, это самый простой способ, так как вы будете создавать квадрат одинакового размера:

var c = document.getElementById('my-canvas').getContext('2d');
var side = document.getElementById('container').clientHeight;
c.fillStyle = '#f00';
c.beginPath();
c.moveTo(0, 0);
c.lineTo(0, side);
c.lineTo(side, side);
c.lineTo(side, 0);
c.closePath();
c.fill();

Но как насчет многоугольника с 5 углами или n углами?

var corners = 5;
var c = document.getElementById('my-canvas').getContext('2d');
var side = (document.getElementById('container').clientHeight * 4) / corners;
c.fillStyle = '#f00';
c.beginPath();
c.moveTo(0, 0);
// ok the following is totally wrong, but I'm sure there is a loop involved and that the x & y
// should increment/decrement each time around in some way, relevant to the value of *side*
for (var i=0; i<corners; i++) {
   c.lineTo((side*i), side);
} 
c.closePath();
c.fill();

Спасибо заранее за любую помощь!

НОТА :

Меня интересуют только многоугольники, стороны которых имеют одинаковую длину (я думаю, это то, что вы бы назвали «правильным» многоугольником?).

Поскольку мы находимся во вселенной HTML / CSS, наименьшей допустимой стороной будет длина 1 пикселя. Так что это единственное ограничение.

Тип полигонов, о которых я говорю, - это те, которые находятся в левом нижнем углуэто изображение, Видимо они типа "правильные выпуклые"? Извиняюсь, но я не математик.