Fix legacy canvas loading

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -234,6 +234,7 @@
                 />
                 <input
                   v-model="settings.active.arDetect.timers.playing"
+                  @change="setArCheckFrequency($event.target.value)"
                   class="input"
                   type="text"
                 >
@@ -244,10 +245,10 @@
             <div class="field">
               <div class="label">Frame extraction canvas type:</div>
               <div class="select">
-                <select v-model="settings.active.arDetect.aardType">
+                <select v-model="settings.active.arDetect.aardType" @change="settings.saveWithoutReload">
                   <option value="auto">Automatic</option>
                   <option value="webgl">WebGL only</option>
-                  <option value="fallback">Legacy / fallback</option>
+                  <option value="legacy">Legacy / fallback</option>
                 </select>
               </div>
             </div>

src/ext/lib/aard/Aard.ts

@@ -370,14 +370,14 @@ export class Aard {
         return new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'});
       } catch (e) {
         if (this.settings.active.arDetect.aardType !== 'webgl') {
-          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
+          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
         }
         console.error('[ultrawidify|Aard::createCanvas] could not create webgl canvas:', e);
         this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}});
         throw e;
       }
     } else if (this.settings.active.arDetect.aardType === 'legacy') {
-      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
+      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
     } else {
       console.error('[ultrawidify|Aard::createCanvas] invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
       this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}});

src/ext/lib/aard/gl/FallbackCanvas.ts

@@ -2,7 +2,9 @@ import { GlCanvas, GlCanvasOptions } from './GlCanvas';
 
 
 export class FallbackCanvas extends GlCanvas {
-
+  get type() {
+    return 'legacy';
+  }
   context: CanvasRenderingContext2D;
 
   constructor(options: GlCanvasOptions) {
@@ -24,7 +26,7 @@ export class FallbackCanvas extends GlCanvas {
   protected initWebgl() { }
 
   drawVideoFrame(video: HTMLVideoElement) {
-    this.context.drawImage(video, this.context.canvas.width, this.context.canvas.height);
+    this.context.drawImage(video, 0, 0, this.context.canvas.width, this.context.canvas.height);
   }
 
   getImageData() {

src/ext/lib/aard/gl/GlCanvas.ts

@@ -52,6 +52,9 @@ interface GlCanvasProgramInfo {
 }
 
 export class GlCanvas {
+  get type() {
+    return 'webgl';
+  }
 
   private _canvas: HTMLCanvasElement;
   private set canvas(x: HTMLCanvasElement) {

src/options/AutodetectionSettings.vue

@@ -601,17 +601,6 @@ export default {
   },
   created() {
     this.sensitivity = this.getSensitivity();
-
-    const canvas = document.createElement('canvas');
-    canvas.width = 10;
-    canvas.height = 10;
-    const ctx = canvas.getContext('2d');
-    try {
-      ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
-      this.fallbackModeAvailable = true;
-    } catch (e) {
-      this.fallbackModeAvailable = false;
-    }
   },
   methods: {
     setArCheckFrequency(event) {