From aed99b94fc05e0747f5d0ee595beda235c3d96c1 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 16 Nov 2023 18:42:12 -0300
Subject: [PATCH] Don't try to get canvas context on null canvas elements

---
 src/components/widgets/Attitude.vue       | 5 +----
 src/components/widgets/Compass.vue        | 2 +-
 src/components/widgets/CompassHUD.vue     | 5 +----
 src/components/widgets/DepthHUD.vue       | 5 +----
 src/components/widgets/VirtualHorizon.vue | 2 +-
 5 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/widgets/Attitude.vue b/src/components/widgets/Attitude.vue
index 74fa66671..c43fe7b82 100644
--- a/src/components/widgets/Attitude.vue
+++ b/src/components/widgets/Attitude.vue
@@ -163,10 +163,7 @@ const angleY = (angle: number): number => {
 }
 
 const renderCanvas = (): void => {
-  if (canvasRef.value === undefined) {
-    console.error('Canvas ref undefined!')
-    return
-  }
+  if (canvasRef.value === undefined || canvasRef.value === null) return
   if (canvasContext.value === undefined) {
     console.warn('Canvas context undefined!')
     canvasContext.value = canvasRef.value.getContext('2d')
diff --git a/src/components/widgets/Compass.vue b/src/components/widgets/Compass.vue
index d487bafbb..208c8dcc9 100644
--- a/src/components/widgets/Compass.vue
+++ b/src/components/widgets/Compass.vue
@@ -86,7 +86,7 @@ const smallestDimension = computed(() => (width.value < height.value ? width.val
 
 // Renders the updated canvas state
 const renderCanvas = (): void => {
-  if (canvasRef.value === undefined) return
+  if (canvasRef.value === undefined || canvasRef.value === null) return
   if (canvasContext.value === undefined) canvasContext.value = canvasRef.value.getContext('2d')
   const ctx = canvasContext.value
   resetCanvas(ctx)
diff --git a/src/components/widgets/CompassHUD.vue b/src/components/widgets/CompassHUD.vue
index 0f46444ca..1674d4634 100644
--- a/src/components/widgets/CompassHUD.vue
+++ b/src/components/widgets/CompassHUD.vue
@@ -146,10 +146,7 @@ const angleX = (angle: number): number => {
 const canvasRef = ref<HTMLCanvasElement | undefined>()
 const canvasContext = ref()
 const renderCanvas = (): void => {
-  if (canvasRef.value === undefined) {
-    console.error('Canvas ref undefined!')
-    return
-  }
+  if (canvasRef.value === undefined || canvasRef.value === null) return
   if (canvasContext.value === undefined) {
     console.warn('Canvas context undefined!')
     canvasContext.value = canvasRef.value.getContext('2d')
diff --git a/src/components/widgets/DepthHUD.vue b/src/components/widgets/DepthHUD.vue
index 4b5892952..a421bd2ea 100644
--- a/src/components/widgets/DepthHUD.vue
+++ b/src/components/widgets/DepthHUD.vue
@@ -116,10 +116,7 @@ const distanceY = (altitude: number): number => {
 const canvasRef = ref<HTMLCanvasElement | undefined>()
 const canvasContext = ref()
 const renderCanvas = (): void => {
-  if (canvasRef.value === undefined) {
-    console.error('Canvas ref undefined!')
-    return
-  }
+  if (canvasRef.value === undefined || canvasRef.value === null) return
   if (canvasContext.value === undefined) {
     console.warn('Canvas context undefined!')
     canvasContext.value = canvasRef.value.getContext('2d')
diff --git a/src/components/widgets/VirtualHorizon.vue b/src/components/widgets/VirtualHorizon.vue
index 84749d928..3aa2c409c 100644
--- a/src/components/widgets/VirtualHorizon.vue
+++ b/src/components/widgets/VirtualHorizon.vue
@@ -34,7 +34,7 @@ const smallestDimension = computed(() => (width.value < height.value ? width.val
 
 // Renders the updated canvas state
 const renderCanvas = (): void => {
-  if (canvasRef.value === undefined) return
+  if (canvasRef.value === undefined || canvasRef.value === null) return
   if (canvasContext.value === undefined) canvasContext.value = canvasRef.value.getContext('2d')
   const ctx = canvasContext.value
   resetCanvas(ctx)