CanvasContext.createCircularGradient

Create a circular gradient point, the start point is the center of the circle and the end point is the ring. The addColorStop() should be called to specify the gradient point and at least two points should be specified.

Parameters

It is Object type.

PropertyTypeDescription
xNumberThe x coordinate of original point.
yNumberThe y coordinate of original point.
rNumberThe radius.

Sample Code

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

const grd = ctx.createCircularGradient(90, 60, 60)
grd.addColorStop(0, 'blue')
grd.addColorStop(1, 'red')

ctx.setFillStyle(grd)
ctx.fillRect(20, 20, 250, 180)
ctx.draw()