general option component (canvas size)

src/components/Canvas.vue

@@ -3,8 +3,8 @@
     <canvas
       id="canvas"
       ref="canvas"
-      width="500"
-      height="500"
+      :width="canvasWidth"
+      :height="canvasHeight"
     />
   </main>
 </template>
@@ -24,13 +24,13 @@ export default {
     ...mapGetters({
       cellProperties: 'getCellProperties',
       rules: 'getRuleSet1d',
-      drawing: 'isDrawing'
+      drawing: 'isDrawing',
+      canvasWidth: 'getCanvasWidth',
+      canvasHeight: 'getCanvasHeight'
     })
   },
   mounted() {
     this.canvas = this.$refs['canvas']
-    this.canvas.width = 1280
-    this.canvas.height = 720
     this.ctx = this.canvas.getContext('2d')
     this.$root.$on('draw1d', () => { this.draw1d() })
     this.$root.$on('draw2d', () => { this.draw2d() })
@@ -88,7 +88,7 @@ export default {
       return draw2dNext(board)
     },
     stop() {
-      this.$root.$store.state.drawing = 0
+      this.$store.commit('setDrawingStatus', 0)
     },
     reset() {
       this.stop()