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.

FieldTypeDescription
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()