Как добавить изображение в круг Canvas

Question

Есть круг на канвасе нужно в него добавить изображение как это сделать?

ctx.arc(90,190,80,0,Math.PI*2,true)
ctx.closePath();
ctx.fill();

Answer 1

Вам поможет CanvasRenderingContext2D.createPattern()

let ctx = c.getContext('2d');
let img = new Image();
img.src = 'https://picsum.photos/150';
img.onload = () => {
  let pattern = ctx.createPattern(img, 'no-repeat');
  ctx.arc(75, 75, 74, 0, Math.PI*2);
  ctx.fillStyle = pattern;
  ctx.fill();
};

<canvas id=c></canvas>

БЛОГ НА HUSL

Как добавить изображение в круг Canvas

Ответы (1 шт):