DOCS

CanvasContext.fill

Fill the current path. The default color is black.

  • If current path is not closed, fill() will connect the start point and end point and then fill.
  • The path that fill() covers is started from beginPath(), but does not cover that fillRect() covers.

Sample Code

copy
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.moveTo(20, 20)
ctx.lineTo(200, 20)
ctx.lineTo(200, 200)
ctx.fill()
ctx.draw()
copy
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.rect(20, 20, 110, 40)
ctx.setFillStyle('blue')
ctx.fill()

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

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

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

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