Cannot read properties of null (reading 'getContext')

[icebob]

Expected behavior

Handle when the this.canvas is null.

Current behavior

We have a statistics web app with multiple pages with multiple charts and when we change the pages, (if it's as fast as ~1 second) sometimes the chartjs throws an error and after that, all charts disappear and never appear again, just after F5.

chrome_EU2BlEhWMr.mp4

This problem does not happen if the animation is turned off.

Reproducible sample

https://codesandbox.io/p/sandbox/vue-chart-3-chart-js-issue-template-forked-f2gkpm

Optional extra steps/info to reproduce

Press the buttons one after the other quickly.

Possible solution

Based on the stack trace, It looks the clearCanvas doesn't handle if the canvas is null

Chart.js/src/helpers/helpers.canvas.ts

Line 135 in 1777f95

ctx = ctx || canvas.getContext('2d');

Context

The error:

helpers.canvas.js:119 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at clearCanvas (helpers.canvas.js:119:23)
    at Chart.clear (core.controller.js:268:5)
    at Chart.draw (core.controller.js:718:10)
    at core.animator.js:89:15
    at Map.forEach (<anonymous>)
    at Animator._update (core.animator.js:60:18)
    at core.animator.js:45:12

chart.js version

v4.2.1

Browser name and version

Chrome latest

Link to your project

No response