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(); 
Top comments (0)