Dynamically resize canvas on window resize

Question

I am attempting to resize a canvas chart when a user resizes their browser window. The problem with changing it directly, or so I've found...is that the image disappears during the resizing. Here are some screenshots to help you understand my problem.

This is the chart before resizing.

This is the chart during the resizing. (without targeting the DOM element)

I've identified the chart overflowing on the right hand side.

Chart being resized and targeting the canvas width.

As you can see, the chart disappears.

    let canvas = document.getElementById('canvas');
    this.canvas.width = ${
      event.target.innerWidth - (window.innerWidth / 100) * 2
    };

Please let me know what options I have for dynamically resizing canvas charts. Thanks!

P.S. I'm using AngularJs for this particular project.

Update 12/30/2020

Discovered that the obvious reason for the chart disappearing is that the canvas is based on coordinates which originate from a set height/width. So the solution was re-mapping the strokes/fills as the canvas is resizing.

New challenge:

Using clearRect (0, 0, width, height) doesn't clear the canvas. Re-mapping results in an inifite mapping of charts on top of one another. As shown in the photo below.

Should that not be this.canvas.width = `${event.target.innerWidth - (window.innerWidth / 100) * 2}px`; Please use the [<>] snippet editor to create a minimal reproducible example — mplungjan
Width is defaulted to pixels actually so I typically keep it out unless I need a specific unit of measurement. Regarding the code, I can't share the functionality behind it as it's company owned. Pictures are the best I can do. The main issue is that the chart itself disappears when resizing the chart dynamically. — Kota

Kota Kota · Accepted Answer · 2020-12-31T04:01:28

Is this the solution I get paid a million dollars for? No. But...

After hours of spinning around thoughts as to why the creators never made an easy solution for resizing a canvas, I've finally found an option that works for resizing the charts. Note that if you're scaling up that it can become pixelated. But this option will work.

Instead of defining the height and width with the inline properties:

<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>

You should use css to make the height and width 100%. This turns the canvas into an image essentially. Which is why it pixelates when you scale up. The next step is to setup functionality or styling for the element that the canvas is embedded within. This is where the solution arises. Because you can't adjust the canvas without losing the graphic. You have to adjust the element that encapsulates it!

Ex:

<div id="area-chart">
  <canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>

You would dynamically adjust the height and width of the #area-chart. I personally suggest using viewport width to define the height as it is the most flexible in terms of scaling and the graphic pixelates far less than using other measurements (%, px, pt, etc.). Of course your needs may be different than mine, but here's some sample styling.

Sample scss:

#area-chart {
  #canvas {
    width: 100%;
    height: 10vw;
  }
}

Chart on load:

Chart scaled down:

Chart scaled up:

** note that the pixel dimensions in the screenshots are the full window size and not the size of the element

Dynamically resize canvas on window resize

1 Answers