Teamur,
Матрицы трансформации надо:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Matrix</title>
</head>
<body>
<canvas id="canvas" width=600 height=300 style="outline:1px solid"></canvas>
<script>
class Path extends Path2D {
constructor(radius, vertices) {
super();
for (let A = 2 * Math.PI / vertices, a, i = 0; i < vertices; i++) {
a = i * A;
this.lineTo(radius * Math.cos(a), radius * Math.sin(a));
}
this.closePath();
}
}
class Polygon {
constructor(x, y, path) {
this.path = path;
this.matrix = new DOMMatrix();
this.translate(x, y);
this.rotate(0);
this.scale(1);
}
translate(x, y) {
this.matrix.translateSelf(x, y);
}
rotate(angle) {
this.matrix.rotateSelf(angle);
}
scale(factor) {
this.matrix.scaleSelf(factor);
}
render(ctx, color) {
ctx.save();
ctx.setTransform(this.matrix);
ctx.strokeStyle = color;
ctx.stroke(this.path);
ctx.restore();
}
}
const ctx = canvas.getContext('2d');
let path1 = new Path(50, 5);
let path2 = new Path(100, 10);
let polygon1 = new Polygon(150, 100, path1);
polygon1.rotate(-90);
polygon1.render(ctx, 'green');
let polygon2 = new Polygon(450, 100, path1);
polygon2.render(ctx, 'blue');
let polygon3 = new Polygon(300, 150, path2);
polygon3.render(ctx, 'red');
setTimeout(() => {
polygon3.translate(0, -50);
polygon3.scale(0.5);
polygon3.render(ctx, 'gray');
}, 3000);
</script>
</body>
</html>