Есть код как тут закруглить края
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"#c000ff");
grd.addColorStop(0.13,"#c000ff");
grd.addColorStop(1,"#ff53c8");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
<canvas id="canvas"></canvas>
Если я правильно понял и вам нужен способ сделать прямоугольник с закругленными краями то легче всего это сделать с помощью функции ctx.arcTo(), которая принимает пять параметров:
x1 - Координата первой опорной точки по оси x.
y1 - Координата первой опорной точки по оси y.
x2 - Координата второй опорной точки по оси x.
y2 - Координата второй опорной точки по оси y.
radius - радиус дуги.
Прямая от текущей точки до x1,y1 - первая касательная.
Прямая от точки x1,y1 до x2,y2 - вторая касательная.
Эти две касательные оформляют дугу, а пятый парметр служит радиусом окружности, на которой усекается дуга.
Для вашего кода подойдет такая функция (не рекомендую использовать так как нет ни одной проверки и при неправильных значениях можете получить непредсказуемый результат):
function fillRoundedRect(ctx, x, y, w, h, r){
ctx.beginPath();
ctx.moveTo(x + (w /2), y);
ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
ctx.arcTo(x, y + h, x, y + (h / 2), r);
ctx.arcTo(x, y, x + (w / 2), y, r);
ctx.closePath();
ctx.fill();
}
x - координата верхней левой точки прямоугольника по оси х.
у - координата верхней левой точки прямоугольника по оси у.
w - длина прямоугольника.
h - высота прямоугольника.
r - радиус скругления краев.
В общем ваш код должен выглядеть так:
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let grd = ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"#c000ff");
grd.addColorStop(0.13,"#c000ff");
grd.addColorStop(1,"#ff53c8");
function fillRoundedRect(ctx, x, y, w, h, r){
ctx.beginPath();
ctx.moveTo(x + (w /2), y);
ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
ctx.arcTo(x, y + h, x, y + (h / 2), r);
ctx.arcTo(x, y, x + (w / 2), y, r);
ctx.closePath();
ctx.fill();
}
ctx.fillStyle = grd;
fillRoundedRect(ctx, 20, 20, 150, 100, 15);</code></pre>
<canvas id="canvas"></canvas>
ctx.fillStyle=grd;
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
