CanvasContext.closePath

2023-06-28 02:52

Close a path. The close path will connect start point and end point. If fill() or stroke() is not invoked and a new path is created after closePath, the former path will not be rendered.

Sample Code

copy

 //.js draw a triangle
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.moveTo(20, 20)
ctx.lineTo(150, 20)
ctx.lineTo(150, 150)
ctx.closePath()
ctx.stroke()
ctx.draw()

copy

//.js draw with fill
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.rect(20, 20, 150, 50)
ctx.closePath()

ctx.beginPath()
ctx.rect(20, 50, 150, 40)

ctx.setFillStyle('red')
ctx.fillRect(20, 80, 120, 30)

ctx.rect(20, 150, 150, 40)

ctx.setFillStyle('blue')
ctx.fill()
ctx.draw()