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

Question

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

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

我想要达到的结果

深浅一致

Answer 1

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