SOURCE

var canvasWatermark = function(parameter) {

	var canvas = parameter.el,
		field = parameter.field,
		list = parameter.list,
		watermarkText = parameter.watermark,
		callback = parameter.callback;


	if (!canvas || !canvas.getContext) {
		return callback && callback('浏览器不支持canvas');
	}


	// 2d画布
	var context = canvas.getContext('2d');
	// 字段高度
	var itemHeight = 35;


	// 画布宽度
	canvas.width = canvas.clientWidth;
	// 画布高度
	canvas.height = canvas.clientHeight;


	// 创建水印
	watermarkText = watermarkText || '';
	var watermark = document.createElement('canvas')
	watermark.width = watermarkText.length * 35;
	watermark.height = watermarkText.length * 20 + 35;
	var watermarkTextCtx = watermark.getContext("2d");
	watermarkTextCtx.font = "30px/0px 黑体";
	watermarkTextCtx.fillStyle = "rgba(0,0,0,0.1)";
	watermarkTextCtx.rotate(-20 * Math.PI / 180);
	watermarkTextCtx.fillText(watermarkText, -10, watermarkText.length * 20);
	watermarkTextCtx.rotate(20 * Math.PI / 180);


	// 绘制水印
	var pattern = context.createPattern(watermark, "repeat");
	context.fillStyle = pattern;
	context.beginPath();
	context.strokeStyle = "rgba(0,0,0,0)";
	context.rect(0, 0, canvas.width, canvas.height);
	context.fill();
	context.stroke();

	return callback && callback(null);

};

<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript" language="javascript">
	canvasWatermark({
		// 元素标签
		el: document.getElementById('canvas'),
		// 水印
		watermark: '这是水印',
		// 渲染完成回调 err为检测支不支持canvas
		callback: function(err) {
			console.log(err);
		}
	});
</script>