用canvas写一个水印组件

最近有个给应用加水印的需求，思路是用canvas生成一张带文字信息的图片，然后平铺在页面上。水平有限，不好的望指出，感谢。

<template>
    <view
        class="watermark"
        :style="{ backgroundImage: `url(${imgSrc})` }"
    >
        <canvas
            style="width: 110px; height: 40px; visibility: hidden;"
            canvas-id="watermarkCanvas"
        ></canvas>
    </view>
</template>

<script>
    export default {
        props: {
            // 显示的文字
            content: {
                type: String,
                default: "我是水印"
            },
            // 文字的颜色
            fontColor: {
                type: String,
                default: "rgba(0, 0, 0, .2)"
            }
        },
        data() {
            return {