canvas object displays the data but data is still empty

ActiveBOWeb/src/components/MountainCarCanvas.vue

@@ -1,5 +1,5 @@
 <template>
- <canvas id="MCcanvas"/>
+ <canvas id="MCcanvas" flex/>
 </template>
 
 <script setup>
@@ -13,8 +13,11 @@ const canvasWidth = mcstore.width;
 const canvasHeight = mcstore.height;
 
 const renderImage = () => {
-  const { height, width } = mcstore.getDim;
-  const { red, green, blue } = mcstore.getRgbArrays;
+  const height = mcstore.getHeight;
+  const width = mcstore.getWidth;
+  const red = mcstore.getRed;
+  const green = mcstore.getGreen;
+  const blue = mcstore.getBlue;
 
   const rgbData = new Uint8ClampedArray(height * width * 4);
   for (let i = 0; i < height * width; i++) {
@@ -30,10 +33,11 @@ const renderImage = () => {
 
 const drawImage = () => {
   if (imageData.value) {
-    const ctx = document.getElementById('MCcanvas');
+    const canvas = document.getElementById('MCcanvas');
+    const context = canvas.getContext('2d')
 
     const image = new ImageData(imageData.value, canvasWidth, canvasHeight);
-    ctx.putImageData(image, 0 , 0);
+    context.putImageData(image, 0 , 0);
   }
 }
 

ActiveBOWeb/src/components/RosBar.vue

@@ -128,7 +128,6 @@ const rl_feedback_subscriber = new ROSLIB.Topic({
 rl_feedback_subscriber.subscribe( (msg) => {
   mcstore.setDim(msg.height, msg.width);
   mcstore.setRgbArrays(msg.red, msg.green, msg.blue);
-  console.log(msg)
 });
 
 const rl_service = new ROSLIB.Service({

ActiveBOWeb/src/store/MountainCarStore.js

@@ -12,8 +12,11 @@ export const useMCStore = defineStore('Mountain Car Store', {
         }
     },
     getters: {
-        getRgbArrays: (state) => [state.red, state.green, state.blue],
-        getDim: (state) => [state.height, state.width],
+        getRed: (state) => state.red,
+        getGreen: (state) => state.green,
+        getBlue: (state) => state.blue,
+        getHeight: (state) => state.height,
+        getWidth: (state) => state.width,
     },
     actions: {
         setRgbArrays(red, green, blue) {