Mac和Windows上使用Canvas画水印深浅不一致

问题遇到的现象和发生背景

Mac和Windows上使用Canvas画水印深浅不一致

问题相关代码，请勿粘贴截图

function addWaterMarker(str) {
    var can = document.createElement('canvas');
    var body = document.getElementById('mainRightWrap');
    body.appendChild(can);
    can.width = 400;
    can.height = 100;
    can.style.display = 'none';
    var cans = can.getContext('2d');
    cans.rotate(-5 * Math.PI / 180);
    cans.font = "italic normal lighter 22px Microsoft YaHei";
    cans.fillStyle = "rgba(213, 213, 213, 0.4)";
    cans.textAlign = 'left';
    cans.textBaseline = 'Middle';
    cans.fillText(str, 0, can.height / 2);
    body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
// addWaterMarker('[保密,请勿外传 <%= userInfo.username %><%= userInfo.workId %>]');
// addWaterMarker('[保密,请勿外传 ' + water.username + water.workId + ']');
setTimeout(() => {
    addWaterMarker('[保密]' + water.username + water.workId);
}, 200);

运行结果及报错内容

没有报错

我的解答思路和尝试过的方法

放入定时器中可以在Mac中显示出来了但是显示出来的颜色十分淡，没有在windows中深
下图为windows

下图为mac

我想要达到的结果

深浅一致

检测一下浏览器，如果是mac环境，换一下颜色

canvas的很多效果都有差异

JS判断下浏览器设置不同的颜色

    function watermarkWord() {
        for (let i = 0; i <=11; i++) {
            for (let n = 0; n < 11; n++) {
                $('body').append('<div  style="transform: rotate(-25deg); position:absolute;top:' + 90 * (n) + 'px; left:'+250*(i)+'px; overflow: hidden; z-index: 9999;pointer-events: none; opacity: 0.09; font-size: 20px; color: rgb(0, 0, 0); width: 300px; height: 40px; display: block;">[保密] '+water.username + water.workId+'</div>');
            }
        }
    }

这个可以方法可以解决