Как сделать адаптивным график canvas?

Question

[frontAng]

https://stackblitz.com/edit/angular-ivy-i53nyn?fil...

Answer 1

[twobomb]

canvas {
  border: 1px solid #000;
  width: 100%;
}

initChart(elem: any): void {
    //elem.style.width = this.width + 'px';
    //elem.style.height = this.height + 'px';
    elem.width = this.dpi_width;
    elem.height = this.dpi_height;
  }

Comments

[frontAng]

twobomb, но тогда видимая высота уменьшиться в 2 раза и ширина
в коде width="1200" height ="400"
а по факту 600 и 200

[twobomb]

frontAng,

constructor() {
    let _this = this;
    window.addEventListener("resize",function(){
      _this.chart(_this.id);
    })
  }
  initChart(elem: any): void {
    this.width = window.innerWidth-20;
    this.dpi_width = this.width * 2;
    elem.style.width = this.width + 'px';
    elem.style.height = this.height + 'px';
    elem.width = this.dpi_width;
    elem.height = this.dpi_height;
  }

  lineDrawing(ctx: any): void {
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'red';
    let xRat = Math.max(...this.data.map(el=>el[0]));
    xRat = this.width/xRat *2 ;
    for (const [x, y] of this.data) {
      ctx.lineTo(x * xRat, this.dpi_height - this.padding - y * this.yRatio);
    }
    ctx.stroke();
    ctx.closePath();
  }

[frontAng]

twobomb, спасибо!

[frontAng]

twobomb, но ограничить по ширине его проблемно. Допустим до 500px или 600px ( как пример)
https://stackblitz.com/edit/angular-ivy-xxdd9y?fil...

[frontAng]

twobomb, как вариант? но может можно как-то не в скрипте сделать..

this.width = Math.min(window.innerWidth - 16, 500);

[twobomb]

frontAng,

initChart(elem: any): void {
    this.width = document.getElementById('test').offsetWidth - 2;//2 - это рамки
    this.dpi_width = this.width * 2;
    elem.width = this.dpi_width;
    elem.height = this.dpi_height;
  }

canvas {
  border: 1px solid #000;
  width: 100%;
  max-width: 600px;
}