HTML5 Canvas绘制带有3d边缘的形状

Question

我正在尝试使用HTML画布创建图像中显示的按钮。 我尝试了线性和径向渐变效果，但我无法获得图像中显示的锐边。该按钮应该看起来像一个3D对象。 右上方有一个闪亮的效果（箭头） 绿色按钮的右下边缘效果。

以下是我用于蓝色圆圈的代码

 var circle3 = new Kinetic.Circle({
    x: stage.width()/2,
    y: stage.height()/2 ,
    radius: mainSmallCircleRadius,
    //fill: '#40A3D7',
    fillRadialGradientEndRadius: 260,
    fillRadialGradientColorStops: [0.225, 'rgba(130, 194, 238, 1.000)', 0.422, 'rgba(130, 194, 238, 1.000)',0.435, 'rgba(0, 0, 0, 1.000)',0.451, 'rgba(254, 254, 254, 1.000)',0.494, 'rgba(254, 254, 254, 1.000)']
    //stroke: 'black',
    //strokeWidth: 0.5
  });