Закругление краев

Функция для закругления краев изображений на canvas

by twobomb three

HTML

<canvas width='500px' height='500px'></canvas>

CSS

canvas{
  outline:1px solid red;
}

JavaScript

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

function clipper(ctx,img, x,y,w,h,rad){
  ctx.beginPath();
  ctx.arc(x+rad, y+rad, rad, Math.PI, Math.PI+Math.PI/2 , false);
  ctx.lineTo(x+w - rad, y);
  ctx.arc(x+w-rad, y+rad, rad, Math.PI+Math.PI/2, Math.PI*2 , false);
  ctx.lineTo(x+w,y+h - rad);
  ctx.arc(x+w-rad,y+h-rad,rad,Math.PI*2,Math.PI/2,false);
  ctx.lineTo(x+rad,y+h);
  ctx.arc(x+rad,y+h-rad,rad,Math.PI/2,Math.PI,false);
  ctx.closePath();
  ctx.save();
  ctx.clip();
  ctx.drawImage(img,x,y,w,h);
  ctx.restore();
}


var img = new Image();
img.src = "http://bipbap.ru/wp-content/uploads/2017/09/44_20140925_1955853838-220x220.gif";
img.onload = function(){
  clipper(ctx,img,100,150,200,200,40);
};

var img1 = new Image();
img1.src = "http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg";
img1.onload = function(){
  clipper(ctx,img1,310,50,150,300,70);
}