canvas size is different when drawing canvas size - vue.js

Question

Could you tell me how to fix this issue: canvas has 1200x700px, but the drawing is scaled to 300x150?
<template>
<div>
<input type="text" v-model="msg"></input>
<br>
<canvas v-on:mousemove="mouse" id="c"></canvas>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
vueCanvas: null,
pixel: null
}
},
methods: {
mouse: function (event) {
this.vueCanvas.putImageData(this.pixel, event.offsetX, event.offsetY)
this.msg = event.offsetX + ":" + event.offsetY
},
init: function () {
this.vueCanvas = document.getElementById("c").getContext("2d");
this.pixel = this.vueCanvas.createImageData(1, 1);
this.pixel.data[3] = 255;
}
},
mounted() {
this.init()
}
}
</script>
<style scoped>
#c {
height: 700px;
width: 1200px;
border: 1px solid gray;
}
</style>
Snippet:
new Vue({
el: "#app",
data() {
return {
msg: 'Welcome to Your Vue.js App',
vueCanvas: null,
pixel: null,
};
},
methods: {
mouse: function(event) {
this.vueCanvas.putImageData(this.pixel, event.offsetX, event.offsetY);
this.msg = event.offsetX + ':' + event.offsetY;
},
init: function() {
this.vueCanvas = document.getElementById('c').getContext('2d');
this.pixel = this.vueCanvas.createImageData(1, 1);
this.pixel.data[3] = 255;
},
},
mounted() {
this.init();
},
})
#c {
height: 700px;
width: 1200px;
border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="msg" />
<br />
<canvas v-on:mousemove="mouse" id="c"></canvas>
</div>
I have recorded a video in order to show what goes wrong.

Answer 1

I find solution:
this.vueCanvas.canvas.width=this.vueCanvas.canvas.clientWidth //300->1200
this.vueCanvas.canvas.height=this.vueCanvas.canvas.clientHeight //150->700
but I am not sure if is it good practice.

Answer 2

This is how I meant in my comment:
new Vue({
el: "#app",
data() {
return {
msg: 'Welcome to Your Vue.js App',
vueCanvas: null,
pixel: null,
};
},
methods: {
mouse: function(event) {
this.vueCanvas.putImageData(this.pixel, event.offsetX, event.offsetY);
this.msg = event.offsetX + ':' + event.offsetY;
},
init: function() {
this.vueCanvas = document.getElementById('c').getContext('2d');
this.pixel = this.vueCanvas.createImageData(1, 1);
this.pixel.data[3] = 255;
},
},
mounted() {
this.init();
},
})
#c {
border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="msg" />
<br />
<canvas v-on:mousemove="mouse" id="c" width="1200" height="700"></canvas>
</div>
Is this not how you want it?