javascript - endring av størrelse på canvas-element ved hjelp av vindushendelse

Jeg bruker TypeScript for å tegne på canvas-elementet. Jeg ønsker å gjøre canvas-elementet responsivt i forhold til skjermstørrelsen. Slik at jeg kan tilpasse størrelsen på canvas til foreldre-div-elementet.

Jeg har prøvd å bruke dette ved å fjerne størrelsen i canvas og angi den i .css. Men dette hjelper ikke fordi jeg har to faste elementer. Jeg har funnet denne løsningen som er en 8 år gammel canvas-tilpasning.

Hvordan kan jeg nærme meg dette problemet? Svaret jeg har lagt ut ødelegger bildekvaliteten altfor mye. Finnes det en annen tilnærming?

export class bar {

  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private width_canvas: number;
  private height_canvas: number;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = < HTMLCanvasElement > canvas;

    this.ctx = < CanvasRenderingContext2D > canvas.getContext('2d');

    this.width_canvas = this.canvas.width;
    this.height_canvas = this.canvas.height;

    window.requestAnimationFrame(() => this.draw());
  };

  draw() {

      let wid_bar: number = this.width_canvas - 400;
      this.value.forEach((val, idx) => {

          // draw bar background
          this.ctx.save();
          this.ctx.beginPath();
          this.ctx.rect(200, (idx * (80)), wid_bar, 30);
          this.ctx.fillStyle = yellow;
          this.ctx.fill();
          window.requestAnimationFrame(() => this.draw());
        };
      }

<div class="bar">
  <canvas id="canvas" width="1200" height="200"> This does not work </canvas>
</div>

Svar #1

prøv (hvis du bare bruker CSS-bredde uten å tegne på nytt, vil bildet miste kvalitet) i stedet for å bruke inndataverdi, les skjermstørrelse

function change(inp) {
  can.width = inp.value;
  can.height = inp.value/4;
  draw(can, [5,10,15,20])
}

function draw(canvas,value) {
  let ctx = can.getContext('2d');
  let wid_bar = canvas.width - 400;
  value.forEach((val, idx) => {
      // draw bar background
      ctx.save();
      ctx.beginPath();
      ctx.rect(200, idx * 80, wid_bar, 30);
      ctx.fillStyle = 'yellow';
      ctx.fill();
  });
}

change(audio);

canvas { background: black; }

<input id="audio" type="range" min="100" max="600" oninput="change(this)" value=150 /><br>

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