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)