Закруглить углы картинки

Картинка с закруглёнными углами

В Canvas нет параметра, которая закругляет углы картинки. Но можно создать закруглённый квадрат и вставить в неё картинку. Через параметр globalCompositeOperation задаётся, что картинку надо показывать только в пределах текущей фигуры.

var imgSource = "image.jpg"; // картинка

// выполнение функции, когда картинка полностью загрузится
var img = new Image();
img.src = imgSource;
img.onload = function(){

    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d");
    ctx.beginPath();

    // рисование квадрата
    ctx.rect(30, 30, img.width-60, img.height-60);
    ctx.lineJoin = "round"; // сделать углы рамок закруглёнными
    ctx.lineWidth = 40; // толщина рамок
    ctx.stroke(); // нарисовать рамку
    ctx.closePath();
    ctx.fill();

    // картинка показывается на пересечнии самой картинки и фигуры
    ctx.globalCompositeOperation = 'source-in';

    // добавление картинки в <canvas>
    ctx.drawImage(img,0,0); 
}

Пример на JSFiddle

Картинка внутри круга

Чтобы показать картинку внутри круга, можно нарисовать круг и внутри неё вставить картинку.

var imgSource = "image.jpg"; // картинка
 
// выполнение функции, когда картинка загрузится
var img = new Image();
img.src = imgSource;
img.onload = function(){
 
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d");
    ctx.beginPath();

    // рисование круглой фигуры
    ctx.arc(img.width/2, img.height/2, img.height/2, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
 
    // картинка показывается на пересечении самой картинки и фигуры
    ctx.globalCompositeOperation = 'source-in';

    // добавление картинки в canvas
    ctx.drawImage(img,0,0);
}

Пример на JSFiddle