복잡한 모양 B 부분.

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();

// 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();