изменение размера элемента canvas с помощью события window

Question

Я использую машинопись для рисования элемента canvas.Я бы хотел, чтобы мой элемент canvas отвечал размеру экрана.Чтобы я мог сопоставить размер холста с родительским элементом div.

Я пытался использовать это , удаляя размер холста и предоставляя его в .css .Но это не помогает, потому что у меня есть два фиксированных элемента.Я нашел это решение, которому 8 лет канва изменяет размер .

Как я могу подойти к этой проблеме?Ответ, который я опубликовал, слишком сильно искажает качество изображения.Есть ли другой подход?

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>

Answer 1

попробуйте (если вы используете ширину CSS только без перерисовки, тогда картинка потеряет качество) вместо ввода размера чтения экрана баланса

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>