reviewed canvas to computed

src/components/BrushLibrary.vue

@@ -38,7 +38,7 @@
         <div class="flex">
           <div v-if="panel.tab === 0">
             <div v-for="(brush, key) in brushHistory" :key="key">
-              <t-card class="hover:border-blue-900 border-gray-300 bg-gray-200">
+              <t-card class="hover:border-blue-900 border-gray-300 bg-gray-200 mt-2">
                 <BrushCanvas :blocks="decompressBlock(brush.blocks)" />
 
                 <t-button
@@ -64,7 +64,7 @@
           <div v-if="panel.tab === 1">
             <div v-for="(brush, key) in brushLibrary" :key="key">
               <t-card
-                :class="`hover:border-blue-900 border-gray-300 bg-gray-200`"
+                :class="`hover:border-blue-900 border-gray-300 bg-gray-200 mt-2`"
               >
                 <BrushCanvas :blocks="decompressBlock(brush.blocks)" />
 

src/components/parts/BrushCanvas.vue

@@ -28,7 +28,7 @@ import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterN
 export default {
   name: "BrushCanvas",
   mounted() {
-    this.ctx = this.$refs[this.canvasName].getContext("2d");
+    this.ctx = this.canvasRef.getContext("2d");
     this.delayRedrawCanvas();
   },
   props: {
@@ -100,6 +100,9 @@ export default {
     mircColours() {
       return mircColours99;
     },
+    canvasRef() {
+      return this.$refs[this.canvasName];
+    }
   },
   watch: {
     getBlocks() {
@@ -144,7 +147,7 @@ export default {
       return filterNullBlocks(blocks)
     },
     drawPreview() {
-      this.ctx.clearRect(0, 0, this.$refs[this.canvasName].width, this.$refs[this.canvasName].height);
+      this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
       this.ctx.fillStyle = this.mircColours[1];
 
       const BLOCK_WIDTH = this.currentAscii.blockWidth;

src/components/parts/MainBrushCanvas.vue

@@ -44,7 +44,7 @@ import {
 export default {
   name: "MainBrushCanvas",
   mounted() {
-    this.ctx = this.$refs.brushcanvas.getContext("2d");
+    this.ctx = this.canvasRef.getContext("2d");
     this.delayRedrawCanvas();
   },
   data: () => ({
@@ -113,6 +113,9 @@ export default {
     mircColours() {
       return mircColours99;
     },
+    canvasRef() {
+      return this.$refs.brushcanvas;
+    }
   },
   watch: {
     brushBlocks() {
@@ -154,7 +157,7 @@ export default {
       return filterNullBlocks(blocks);
     },
     drawPreview() {
-      this.ctx.clearRect(0, 0, this.$refs.brushcanvas.width, this.$refs.brushcanvas.height);
+      this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
       this.ctx.fillStyle = this.mircColours[1];
 
       const BLOCK_WIDTH = this.currentAscii.blockWidth;