class
Talk
{
  static
  main ()
  {
    const canvas = new Canvas;

    setInterval (() => canvas.resize (), 100);
  }
}


class
Canvas
{
  constructor ()
  {
    this.canvas = $ ('#canvas');
    this.ctx = this.canvas[0].getContext ('2d');

    this.bg = new Image ();
    this.bg.src = './assets/bg.jpg';

    this.bg.onload = () => this.resize ();
  }

  resize ()
  {
    this.canvas.width ($ (window).width ());
    this.canvas.height ($ (window).height ());

    this.redraw ();
  }

  redraw ()
  {
    this.putBG (this.canvas.width (), this.canvas.height ());
  }

  putBG (sizeX, sizeY)
  {
    const width = this.bg.width;
    const height = this.bg.height;

    const vertical = sizeY / sizeX > height / width;

    console.log (sizeX, sizeY, width, height);

    const zoom = vertical ? (sizeX / width) : (sizeY / height);

    const x = vertical ? 0 : ((sizeX - width * zoom) / 2);
    const y = vertical ? ((sizeY - height * zoom) / 2) : 0;

    this.ctx.drawImage (this.bg,
                        0, 0, width, height,
                        x, y, width, height);
  }
}


Talk.main ();