component.vue

<template>
    <div class="row">
        <div class="col-12">
            <vue-p5  id="drawing_canvas"
                    @setup="setup"
                    @draw="draw"
                    @touchstarted="paint_on_sketch"
                    @touchmoved="paint_on_sketch"
                    @mousepressed="paint_on_sketch"
                    @mousedragged="paint_on_sketch"
            >
            </vue-p5>
        </div>
    </div>
</template>

<script>
    import VueP5 from "vue-p5";
    import {createNamespacedHelpers} from 'vuex'


    const {mapGetters} = createNamespacedHelpers('game')

    export default {
        name: "Canvas",
        components: {
            "vue-p5": VueP5,

        },
        computed: {
            ...mapGetters([
                'getToolSize', 'getToolColour'
            ])
        },
        data() {
            return {
                canvas: {
                    height: 500,
                    width: 600,
                    background_colour: "#2b2a29",
                    secondary: null
                }
            }
        },
        methods: {
            setup(sk) {
                sk.createCanvas(this.canvas.width, this.canvas.height)
                this.canvas.secondary = sk.createGraphics(
                    this.canvas.width, this.canvas.height
                )
                // this.canvas.secondary.clear()
                sk.background(this.canvas.background_colour);
            },
            draw(sk) {
                sk.background(this.canvas.background_colour);
                sk.image(this.canvas.secondary, 0, 0)
                sk.noStroke()
                sk.fill(this.getToolColour)
                sk.circle(sk.mouseX, sk.mouseY, this.getToolSize)

            },
            paint_on_sketch(sk) {
                this.canvas.secondary.stroke(this.getToolColour)
                this.canvas.secondary.strokeWeight(this.getToolSize)
                this.canvas.secondary.line(sk.mouseX, sk.mouseY, sk.pmouseX, sk.pmouseY);
                return false;
            },
        },

    }
</script>

<style>
#drawing_canvas > canvas{
    width: 100% !important;
    height: 50% !important;
}
</style>