用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 {
                imgSrc: ""
            }
        },
        mounted() {
            const context = uni.createCanvasContext("watermarkCanvas");
            // 设置原点
            context.translate(10, 35);
            // 旋转角度
            context.rotate(345 * Math.PI / 180);
            // 字体大小
            context.setFontSize(14);
            // 字体
            context.font = "Arial";
            // 字体颜色
            context.setFillStyle(`${this.fontColor}`);
            // 文字信息
            context.fillText(`${this.content}`, 0, 0);
            // 绘画
            context.draw(true, () => {
                // 将当前画布内容导出成图片
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 110,
                    height: 40,
                    destWidth: 110,
                    destHeight: 40,
                    canvasId: "watermarkCanvas",
                    success: (res) => {
                        this.imgSrc = res.tempFilePath;
                    }
                });
            });
        }
    };
</script>

<style scoped>
    .watermark {
        position: fixed;
        z-index: 9;
        width: 100%;
        inset: 0;
        pointer-events: none;
        background-repeat: repeat;
        background-size: 110px;
    }
</style>