Unable to position fromVertices in Matter.js

I have a demo here:

https://codepen.io/EightArmsHQ/pen/ExOGgoE/898e7ae5b9ac6ebf7dcf2a7300c4a0cc

I am trying to position two triangles like so:

I used the following dimensions for the triangles:

const funnelHeight = 100;
const funnelWidth = (this.sizes.w - pipe) / 2;

The left therefore has a center point of

funnelWidth / 2, this.sizes.h - funnelHeight / 2

Here is where I get confused. So from this point, I draw the points of the triangle:

const leftFunnel = [
  {x: -funnelWidth / 2, y: - funnelHeight / 2},
  {x: funnelWidth / 2, y: funnelHeight / 2},
  {x: -funnelWidth / 2, y: funnelHeight / 2},
];

Then add it:

this.leftFunnel = Bodies.fromVertices(funnelWidth / 2, this.sizes.h - funnelHeight / 2, leftFunnel , { isStatic: true});

However it is being positioned at a distance away from the edges of the canvas:

What am I doing wrong?

Edit

I have made some progress. If I set the shape up as a rectangle, it works perfectly. So the issue is matter is setting up the centre of gravity, and I am incorrectly placing the object at that point, not the centre of the area it takes up.

It is right as you mentioned in your edited message - you should also take into consideration the center of mass, because from that point position of body gets calculated. By using the Vertices.centre method, you may find that point and use it as offset:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const Vertices = Matter.Vertices;

//...

const center = Vertices.centre(leftFunnel)

this.leftFunnel = Bodies.fromVertices(
  funnelWidth / 2 + center.x,
  funnelWidth / 2 + center.y,
  leftFunnel,
  { isStatic: true }
);

<!-- end snippet -->