SOURCE

// const defaultOptions = {
//     fontSize: '14',
//     fontFamily: 'serif',
//     text: 'admin',
//     angle: Math.PI / 6,
//     marginRight: 50,
//     marginBottom: 75,
//     transparency: '0.5',
//     color: '#000000'
// };
// // 传入 canvas dom，在 canvas 上绘制水印
// // 支持配置： 字号、字体（需浏览器支持/导入字体文件）、文字内容、倾斜角度、边距、透明度、颜色
// function watermark(canvas, options = {}) {
//     options = { ...defaultOptions, ...options };
//     const { angle } = options;

//     const ctx = canvas.getContext('2d');
//     ctx.clearRect(0, 0, canvas.width, canvas.height);
//     ctx.globalAlpha = options.transparency;

//     const textCanvas = createTextCanvas(options);

// //    ctx.rotate(-angle);
//     const pattern = ctx.createPattern(textCanvas, 'repeat');
//     ctx.fillStyle = pattern;

//     // 补全倾斜后的空白
//     const deltaX = Math.sin(angle) * canvas.height;
//     const deltaY = Math.tan(angle) * canvas.width;
//     ctx.fillRect(-deltaX, 0, canvas.width + deltaX, canvas.height + deltaY);
// }

// function createTextCanvas(options) {
//     const {
//         fontSize,
//         text,
//         color,
//         marginBottom,
//         marginRight,
//         fontFamily
//     } = options;
//     const textCanvas = document.createElement('canvas');
//     const textCtx = textCanvas.getContext('2d');
//     textCtx.font = fontSize + 'px serif';
    
//     const { width: textWidth } = textCtx.measureText(text[0]);
//     const textHeight = parseInt(fontSize);
//     textCanvas.width = textWidth + marginRight;
//     textCanvas.height = textHeight + marginBottom;
//     textCtx.font = fontSize + 'px ' + fontFamily;
//     textCtx.fillStyle = color;
//     textCtx.translate(0, textHeight);
    
//     text.forEach((_t, i) => {
//         textCtx.fillText(_t, i * 25, i * 25);
//     });

//     return textCanvas;
// }


    var defaultOptions = {
        fontSize: '18',
        fontFamily: 'serif',
        text: 'admin',
        angle: Math.PI / 6,
        marginRight: 50,
        marginBottom: 75,
        transparency: '0.75',
        color: '#000'
    };

    function watermark(canvas, options) {
        Object.keys(defaultOptions).forEach(function(key) {
            options[key]  = options[key] || defaultOptions[key];
        })

        console.log(options)

        var angle = options.angle;
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = options.transparency;

        var textCanvas = createTextCanvas(options);

        ctx.rotate(-angle);
        var pattern = ctx.createPattern(textCanvas, 'repeat');
        ctx.fillStyle = pattern;

        // 补全倾斜后的空白
        var deltaX = Math.sin(angle) * canvas.height;
        var deltaY = Math.tan(angle) * canvas.width;
        ctx.fillRect(-deltaX, 0, canvas.width + deltaX, canvas.height + deltaY);
    }

    function createTextCanvas(options) {
        var fontSize = options.fontSize;
        var text = options.text;
        var color = options.color;
        var marginBottom = options.marginBottom;
        var marginRight = options.marginRight;
        var fontFamily = options.fontFamily;

        var textCanvas = document.createElement('canvas');
        var textCtx = textCanvas.getContext('2d');
        textCtx.font = fontSize + 'px serif';
        var textWidth = textCtx.measureText(text[0]).width;
        var textHeight = parseInt(fontSize);

        textCanvas.width = textWidth + marginRight;
        textCanvas.height = textHeight + marginBottom;



        textCtx.font = fontSize + 'px ' + fontFamily;
        textCtx.fillStyle = color;
        textCtx.translate(0, textHeight);
        textCtx.fillText('xxxxxxxxxxxxxxxxxxxx', 10, 10);
        // text.forEach(function (_t, i) {
        //     if (_t) {
        //         textCtx.fillText(_t, i * 25, i * 25);
        //     }
        // });
        return textCanvas;
    }

var canvas = document.getElementById('canvas');

canvas.setAttribute('width', document.documentElement.clientWidth);
canvas.setAttribute('height', document.documentElement.clientHeight);

// canvas.setAttribute('width', );
// canvas.setAttribute('hieght', );


watermark(canvas, { text: ['支持配置： 字号、字体（需浏览器支持/导入字体文件）'] });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    定时说说考试
  <canvas id="canvas"></canvas>
</body>
</html>

#canvas {
  border: 1px solid gray;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}