SOURCE

const createWaterMark = ()=>{
    const canvas = document.createElement('canvas');
    const canvas2d = canvas.getContext('2d');
    canvas.width = 200;
    canvas.height = 100;
    canvas2d.font = '12px Arial bolder';
    canvas2d.fillStyle = '#ccc';
 
    canvas2d.translate(canvas.width / 4, canvas.height / 2);
    canvas2d.rotate((-30 / 180) * Math.PI);
    canvas2d.fillText('joke', 0, canvas.height / 2);
    // 将canvas 转为 dataURL
    const base64Url = canvas.toDataURL('image/png');
    return base64Url;
}

const renderWaterMark = ()=>{
    const div = document.createElement('div');
    const url = createWaterMark();
    const style = `
    position:fixed;
                    top:0;
                    left:0;
                    bottom:0;
                    right:0;
                    z-index:999999;
                    background-repeat:repeat;
                    pointer-events:none;
                    background-image:url('${url}')
    `

    div.setAttribute('style',style);
     document.body.appendChild(div);
}

renderWaterMark();

<div id='root'></div>