That is so true. I've noticed that a lot of people think GSAP is only for HTML and SVG, even from long time users. That needs to change. Somewhere on my todo list is to make some tutorials showing how to use GSAP + canvas. It's hard enough trying to find a decent canvas tutorial, let alone one that uses GSAP.
To get a regular polygon to start at 12 o'clock, you just need to swap the sin and cos calls, and negate the y value.
// To start at 3 o'clock
var x = centerX + radius * Math.cos(angle);
var y = centerY + radius * Math.sin(angle);
// To start at 12 o'clock
var x = centerX + radius * Math.sin(angle);
var y = centerY - radius * Math.cos(angle);
And to draw your particles, canvas has a new feature called Path2D that will allow you to create and combine reusable paths, so you could use the same path for all your particles.
Here's a quick fork of your last demo using Path2D with the corrected angles.
The formula used for a regular polygon is based on a circle, so it seems that the center of a polygon should be the same as the circle that circumscribes it, but look at what happens when the polygons has an odd number of sides.
It's not symmetrical going up and down, so the top is further away from the center than the bottom. That means the center needs to be moved down a little if you want to have it perfectly centered inside a container. So we need to calculate the bounds of the polygon, find the difference between the height of the circle and the polygon, and then offset it half of the difference.
And to make the shape and your animations responsive, it will be easier if we calculate the points of a polygon with a radius of 1, and then scale those points based on some desired scale/radius. That's basically how an SVG works.
Check out how everything is nicely centered and responsive in this demo. I'll incorporate that in another version of your demo, which I'll have to do later as I gotta run.