canvas Image cover 효과 주기

Javascript

  • canvas

2023-05-15 15:59

function drawImageCenter(canvas, ctx, image) {
  const cw = canvas.width
  const ch = canvas.height

  const iw = image.width
  const ih = image.height

  const ir = ih / iw
  const cr = ch / cw

  let sx, sy, sw, sh

  if (ir >= cr) {
    sw = iw
    sh = sw * (ch / cw)
  } else {
    sh = ih
    sw = sh * (cw / ch)
  }

  sx = iw / 2 - sw / 2
  sy = ih / 2 - sh / 2

  ctx.drawImage(image, sx, sy, sw, sh, 0, 0, cw, ch)
}
javascript