Задать фоновую картинку для фигурки внутри canvas

Question

Есть такая фигурка внутри canvas элемента, как мне задать фоновую картинку только для закрашенной области? Или другой вариант, я задаю фон на всю картинку, а не закрашенные области остаются прозрачные, есть идеии как это сделать?

Answer 1

const ctx = canvas.getContext('2d')

const img = new Image()
img.src = 'https://picsum.photos/400'
img.onload = () => {

  ctx.beginPath()
  ctx.rect(20, 10, 260, 130)
  ctx.arc(20, 75, 20, 0, Math.PI * 2, false)

  // ctx.save()
  ctx.clip() // описанная выше фигура будет зоной отсечения
  ctx.drawImage(img, 0, 0)
  // ctx.restore()

  ctx.beginPath()
  // ctx.save()
  ctx.globalCompositeOperation = 'destination-out'
  ctx.arc(280, 75, 20, 0, Math.PI * 2, false)
  ctx.fill()
  // ctx.restore()
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

const ctx = canvas.getContext('2d')

const img = new Image()
img.src = 'https://picsum.photos/400'
img.onload = () => {

  ctx.shadowColor = 'rgba(0,0,0, 0.8)'
  ctx.shadowBlur = 10
  ctx.shadowOffsetX = 25
  ctx.shadowOffsetY = 20

  ctx.beginPath()

  // top line
  ctx.moveTo(40, 20)
  ctx.lineTo(260, 20)

  // right line
  ctx.arc(260, 70, 20, Math.PI * 1.5, Math.PI / 2, true)
  ctx.lineTo(260, 120)

  // bottom line
  ctx.lineTo(40, 120)

  // left line
  ctx.arc(40, 70, 20, Math.PI / 2, Math.PI * 1.5, false)
  ctx.lineTo(40, 20)

  ctx.fill()

  ctx.clip()
  ctx.drawImage(img, 0, 0)
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

БЛОГ НА HUSL

Задать фоновую картинку для фигурки внутри canvas

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