29:null 2a:["$","title",null,{"children":"Lane-Riesenfeld subdivision | Claudio Esperança | Observable"}] 2f:T491,polygonDemo(points, { change: function (ctx, points) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.strokeStyle = "black"; ctx.setLineDash([8, 8]); ctx.beginPath(); for (let p of points) { ctx.lineTo(...p); } ctx.closePath(); ctx.stroke(); let pts = points; let f = config.scheme == "LR" ? (pts) => lr(pts, config.degree, config.closed) : config.scheme == "4 points" ? (pts) => fourPoint(pts, config.closed) : (pts) => lr4(pts, config.degree, config.closed, config.w); for (let i = 0; i < config.subdiv; i++) pts = f(pts); ctx.setLineDash([]); ctx.strokeStyle = "blue"; ctx.fillStyle = "rgba(0,0,255,0.2)"; ctx.beginPath(); for (let p of pts) { ctx.lineTo(...p); } if (config.closed) ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; for (let p of points) { ctx.beginPath(); ctx.arc(...p, 4, 0, Math.PI * 2); ctx.fill(); } ctx.strokeStyle = "red"; for (let p of pts) { ctx.beginPath(); ctx.arc(...p, 5, 0, Math.PI * 2); ctx.stroke(); } } })30:T7b4,// // Canvas and interaction code for editing a polygon // function polygonDemo(points, options = {}) { const { width = 800, height = 600, change = (ctx, points, i) => {}, doubleClick = (ctx, points, i) => {} } = options; const canvas = htl.html`