## DEV Community 👩‍💻👨‍💻 is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Jess F

Posted on

# Complex Shapes Part B (something I forgot to mention previously)

I want to add a quick addition to my previous post where I discussed creating a shape from a series of line segments like this:

``````ctx.lineWidth = 3; // just making it a little more visible
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.lineTo(20,200);
ctx.lineTo(100,200);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.stroke();
``````

I forgot to mention that there is a way to write this using a 2 dimensional array so you don't have to repeat so much.

``````// set your points in a 2d array
const shape = [
[20,20],
[20,100],
[100, 100],
[20, 200],
[100, 200],
[200, 20],
[200, 200]
];

ctx.lineWidth = 3;
ctx.beginPath();

// loop through each set of points
// if it's the first set (at index 0), `moveTo` that point,
// otherwise use `lineTo`
shape.forEach((p, i) => {
i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1])
})

ctx.stroke();
``````