fix: 2d canvas fallback logic (#7295)

Author: ozyx

Diff for: src/plugins/plot/chart/MctChart.vue

@@ -506,6 +506,7 @@ export default {
       this.overlay = overlayCanvas;
       this.drawAPI = DrawLoader.getFallbackDrawAPI(this.canvas, this.overlay);
       this.$emit('plot-reinitialize-canvas');
+      console.warn(`📈 fallback to 2D canvas`);
     },
     removeChartElement(series) {
       const elements = this.seriesElements.get(toRaw(series));

Diff for: src/plugins/plot/draw/DrawWebGL.js

@@ -154,14 +154,14 @@ DrawWebGL.prototype.initContext = function () {
 DrawWebGL.prototype.destroy = function () {
   // Lose the context and delete all associated resources
   // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#lose_contexts_eagerly
-  this.gl.getExtension('WEBGL_lose_context').loseContext();
-  this.gl.deleteBuffer(this.buffer);
+  this.gl?.getExtension('WEBGL_lose_context')?.loseContext();
+  this.gl?.deleteBuffer(this.buffer);
   this.buffer = undefined;
-  this.gl.deleteProgram(this.program);
+  this.gl?.deleteProgram(this.program);
   this.program = undefined;
-  this.gl.deleteShader(this.vertexShader);
+  this.gl?.deleteShader(this.vertexShader);
   this.vertexShader = undefined;
-  this.gl.deleteShader(this.fragmentShader);
+  this.gl?.deleteShader(this.fragmentShader);
   this.fragmentShader = undefined;
   this.gl = undefined;