AvatarEditor.js

  renderCanvas () {
    const {ctx, img, offset, zoom} = this.state;
    const {width, height} = this.props;

    const cappedZoom = Math.max(1, zoom);
    const imgSize = Math.min(img.width, img.height);
    const left = (img.width - imgSize) / 2;
    const top = (img.height - imgSize) / 2;

    let hMovement = (-(cappedZoom - 1) * height) - offset.x;
    let vMovement = (-(cappedZoom - 1) * width) - offset.y;

    console.log('movement', `x: ${hMovement}, y: ${vMovement}`);

    ctx.clearRect(0, 0, width, height);
    ctx.setTransform(cappedZoom, 0, 0, cappedZoom, hMovement, vMovement);
    ctx.drawImage(img, left, top, imgSize, imgSize, 0, 0, width, height);
  }