Как конвертировать фигуры canvas из одной системы координат в другую при масштабирование ширины и высоты?

Question

[Roman]

Я пытаюсь перенести фигуры polygon из SVG в Canvas 2d, имеем такой SVG в контейнере

<div class="canvas" style="width: 8000px; height: 8000px; background-color: rgb(201, 212, 232); transform: translate3d(-3068px, -3738px, 0px);">
<svg version="1.1" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden;">
<polygon points="0,0 555,0 555,548 165.66666666666652,548 165.66666666666652,283.16666666666697 0,283.16666666666697 0,0" etype="polygon" transform="translate(3750,3750)" fill-opacity="1"></polygon>
<polygon points="306,-210.66666666666697 471.6666666666665,-210.66666666666697 471.6666666666665,54.16666666666606 306,54.16666666666606 306,-210.66666666666697" etype="polygon" transform="translate(3444,4243.833333333334)" fill-opacity="1"></polygon>
</svg>
</div>

Затем я создаю canvas c такими же размерами 8000 на 8000

<canvas id='canvas' width="8000" height="8000"></canvas>

в который и рисую эти 2 полигона , для каждого из них я смещаю систему координат ctx.translate(x0, y0); как указано в transform="translate(3750,3750)" и все отрисовывается как задумано.

Вопрос, если мне надо размер полотна canvas скалировать, например 800 на 600, как при этом пересчитать координаты начала оси и точки всей фигуры?

Какую формулу тут лучше использовать, что то мне подсказывает, что здесь надо перемещать всю фигуру и перерисовывать заново, простое скалирование aspect ratio как при crop image вряд ли поможет?

Answer 1

[MamaLuyba]

Я при изменении размера канваса просто изменял и его, и фигуры через scale. Не помню, были ли там проблемы с позиционированием фигур, но в итоге все норм работало (если говорить про изменение от большего к меньшему).

Comments

[Roman]

По идее сами то фигуры скалировать не нужно, допустим я размеры хочу оставить те же, а уменьшить размер только полотна до 800 на 800, и в этом случае смещение оси координат в точку 3750,3750 оно просто будет за пределами canvas, тут нужно какое то перемещение фигуры в плоскости. Таких задачи раньше на физмате перерешал много, а сейчас не могу вспомнить, видимо надо браться за учебник.