cavas自适应父元素宽高

       我们在使用cavas画布的过程中，有时候需要修改他的宽高，但是如果通过css样式去修改，有个弊端，就是显示内容比较模糊，为此需要让他的宽高自适应父元素宽高。

        canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。

        如何让其自适应父元素宽高：

<template>
<div id="vehicleVideo">
    <canvas id="vehicleCanvas"> </canvas>
</div>
</template>


<script setup>

import {onMounted} from  "vue"

onMounted(()=> {
 let video = document.getElementById("vehicleVideo");
    let canvas = document.getElementById("vehicleCanvas");
    canvas.width = video.offsetWidth;
    canvas.height = video.offsetHeight;
})
</script>