¿Es necesario incluir ctx.closePath() si voy a usar ctx.fill() o ctx.stroke() al dibujar rutas en el lienzo?
Aquí hay un ejemplo a continuación:
ctx.beginPath() // point 1 ctx.moveTo(x+0.5,y+0.5) // point2 ctx.lineTo(x2+0.5, y2+0.5) // point 3 ctx.lineTo(x3+0.5, y3+0.5) ctx.closePath() // <--- IS THIS NECESSARY ? ctx.stroke()La función hace lo que dice, cierra la ruta, si desea un triángulo cerrado en su ejemplo, entonces se requiere closepath(), si desea dos líneas, entonces no lo es.
Entonces, la respuesta a su pregunta es: No, stroke() y fill() no cierran su ruta.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); let x = 10; let y = 10; ctx.beginPath() // point 1 ctx.moveTo(x/2+0.5,y/2+0.5) // point2 ctx.lineTo(x*2+0.5, y*4+0.5) // point 3 ctx.lineTo(x*3+0.5, y*2+0.5) ctx.closePath() // <--- IS THIS NECESSARY ? ctx.stroke() // New path x = 50; y = 20; ctx.beginPath() // point 1 ctx.moveTo(x+0.5,y+0.5) // point2 ctx.lineTo(x*2+0.5, y*4+0.5) // point 3 ctx.lineTo(x*3+0.5, y*2+0.5) ctx.stroke() <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>