<template>
  <main id="mainContent">
    <canvas
      id="canvas-board"
      ref="canvas-board"
      :width="canvasWidth"
      :height="canvasHeight"
    >
    </canvas>
  </main>
</template>
<script>
  import { mapGetters } from "vuex";
  export default {
    name: "CanvasBoard",
    computed: {
      ...mapGetters({
        canvasWidth: "getCanvasWidth",
        canvasHeight: "getCanvasHeight",
      }),
    },
    mounted() {
      const canvas = document.getElementById("canvas-board")
      const ctx = canvas.getContext("2d");
      this.$store.commit(
        "setCanvas",
        canvas
      )
      this.$store.commit(
        "setContext",
        ctx
      )
      this.$store.commit(
        "setCanvasWidth",
        canvas.parentElement.clientWidth
      );
      this.$store.commit(
        "setCanvasHeight",
        canvas.parentElement.clientHeight
      );
      this.$store.commit(
        "setBoardWidth",
        canvas.parentElement.clientWidth
      );
      this.$store.commit(
        "setBoardHeight",
        canvas.parentElement.clientHeight
      );
    },
  };
</script>
<style>
  #mainContent {
     min-width: 70%;
  }
</style>
