示例：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<script charset = "utf-8">
function addWaterMarker(str){
var can = document.createElement('canvas');
var body = document.body;
body.appendChild(can);
can.width=400;
can.height=200;
can.style.display='none';
var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180);
cans.font = "16px Microsoft JhengHei";
cans.fillStyle = "rgba(17, 17, 17, 0.50)";
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str,can.width/3,can.height/2);
body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
}
addWaterMarker("2019年1月25日")
addWaterMarker("這是添加的水印")
</script>
<h2>這是標題</h2>
<p>這個網頁中，你會看到被加了水印</p>
<form name="user" action="#" method="get">
<table align="center">
<tr>
<td>用戶名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password"/>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="name" checked="checked"/>男
<input type="radio" name="name"/>女
</td>
</tr>
<tr>
<td>地址</td>
<td>
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
<select>
<option>海淀區</option>
<option>朝陽區</option>
<option>昌平區</option>
</select>
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="sport" checked="checked"/>運動
<input type="checkbox" name="basketball"/>籃球
<input type="checkbox" name="volleyball"/>排球
</td>
</tr>
<tr>
<td>郵箱</td>
<td>
<input type="text" name="emall" />
</td>
</tr>
<tr>
<td>電話號碼</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>上傳頭像</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>其他</td>
<td>
<textarea rows="15" cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="普通按鈕"/>
<input type="submit" name="tijiao" value="注冊"/>
<input type="reset" name="quxiao" value="取消"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" name="img" src="btn.gif"/>
</td>
</tr>
</table>
</form>
</body>
</html>
頁面中html部分功能未測試，復制粘貼過來只為測試添加水印功能填充網頁內容。