Basechart (Ng2-Charts) Canvas max width <= 16384px in Firefox?-CodePudding

I prepared this eg in stackblitz - https://stackblitz.com/edit/github-nlvlrr-mwudnj?file=src/app/app.component.ts,src/app/app.component.html,tsconfig.json&preset=node . You can see in Fifrefox everything after the 16384th pixel is not being rendered, while in Chrome the chart is being rendered fully. Is this the limitation of Firefox? Isn't it possible to render more pixels in that browser? Because in canvas max size tables they usually write that firefox renders up to 32768px. Maybe I am doing smth wrong?

Chrome: enter image description here

Firefox: enter image description here

CodePudding user response：

16384 x 2 = 32768

If you type devicePixelRatio in your browser's console you'll probably find 2. You are most likely on a high-res monitor.

Chart.js, that is used behind the hood of your Ng2-Charts library, does have a devicePixelRatio option available. Its default value is window.devicePixelRatio (dPR), so if you don't set it explicitly, the library will resize your canvas automatically to match this dPR. They do this because on such monitors to have crisp pixels, we need to set the canvas buffer to the actual size of the monitors pixels, and then scale the rendered canvas down using CSS.

If you really need to set the canvas to a bigger initial value, you can use this option to limit the dPR to one, e.g

lineChartOptions: ChartOptions<'line'> = {
  devivePixelRatio: 1,
  responsive: true,
  ...

Or you can keep the default and simply check the tables you found about the canvas max size, but divide it by window.devicePixelRatio.

CodePudding user response：

Must be something else in your code, canvas renders fine in Firefox(103.0 (64-bit)) to 30K px

<div style="display: block; width: 30000px">
  <canvas id="canvas" width="30050" height="500"></canvas>
</div>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  for (let i = 10; i < canvas.width; i  = 0.5) {
    ctx.beginPath();
    if (i % 100 == 0) ctx.fillText(i, i, 10)
    ctx.arc(i, 180   Math.sin(i / 10) * Math.sqrt(i), 1, 0, 2 * Math.PI);
    ctx.fill();
  }
</script>

There are a lot of moving pieces in that stackblitz you provided, I would recommend you to start removing dependencies see what could be the cause of your troubles