Закруглить края у canvas

ctx.fillStyle=grd;
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();

Если я правильно понял и вам нужен способ сделать прямоугольник с закругленными краями то легче всего это сделать с помощью функции 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);

<canvas id="canvas"></canvas>