CanvasContext.beginPath

Start to create a path, must use fill or stroke to fill or stroke the path.

In the beginning of creating the path, the beginPath() is invoked. If the setFillStyle(), setStrokeStyle(), setLineWidth() and others are invoked multiple times in the same path, only the last invoke will take effect.

Sample Code

//.js
const ctx = my.createCanvasContext('awesomeCanvas')

ctx.rect(20, 20, 150, 50)
ctx.setFillStyle('blue')
ctx.fill();

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

ctx.setFillStyle('yellow')
ctx.fillRect(20, 170, 150, 40)

ctx.rect(10, 100, 100, 30)

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